<!DOCTYPE HTML>
<html lang="Chinese">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="css基础, 博客">
    <meta name="description" content="In me the tiger sniffs the rose.">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>css基础 | 凡诚</title>
    <link rel="icon" type="image/png" href="/favicon.png">

    <link rel="stylesheet" type="text/css" href="/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">
    <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
    <script src="/libs/jquery/jquery.min.js"></script>

<meta name="generator" content="Hexo 5.4.2"></head>



   <style>
    body{
       background-image: url(https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/res/site/medias/background.jpg);
       background-repeat:no-repeat;
       background-size:cover;
       background-attachment:fixed;
    }
</style>



<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/" class="waves-effect waves-light">
                    
                    <img src="/medias/comment_bg.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">凡诚</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>主页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>文章</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="" class="waves-effect waves-light">

      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>关于我</span>
      <i class="fas fa-chevron-down" aria-hidden="true" style="zoom: 0.6;"></i>
    </a>
    <ul class="sub-nav menus_item_child ">
      
      <li>
        <a href="/about">
          
          <i class="fas fa-user-circle" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>我的信息</span>
        </a>
      </li>
      
      <li>
        <a href="/contact">
          
          <i class="fas fa-comments" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>留言板</span>
        </a>
      </li>
      
      <li>
        <a href="/friends">
          
          <i class="fas fa-address-book" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>友链</span>
        </a>
      </li>
      
    </ul>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="Search" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/medias/comment_bg.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">凡诚</div>
        <div class="logo-desc">
            
            In me the tiger sniffs the rose.
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			主页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			文章
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			分类
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="javascript:;">
			
				<i class="fa-fw fas fa-user-circle"></i>
			
			关于我
			<span class="m-icon"><i class="fas fa-chevron-right"></i></span>
		</a>
            <ul  style="background:  ;" >
              
                <li>

                  <a href="/about " style="margin-left:75px">
				  
				   <i class="fa fas fa-user-circle" style="position: absolute;left:50px" ></i>
			      
		          <span>我的信息</span>
                  </a>
                </li>
              
                <li>

                  <a href="/contact " style="margin-left:75px">
				  
				   <i class="fa fas fa-comments" style="position: absolute;left:50px" ></i>
			      
		          <span>留言板</span>
                  </a>
                </li>
              
                <li>

                  <a href="/friends " style="margin-left:75px">
				  
				   <i class="fa fas fa-address-book" style="position: absolute;left:50px" ></i>
			      
		          <span>友链</span>
                  </a>
                </li>
              
            </ul>
          
        </li>
        
        
    </ul>
</div>


        </div>

        
    </nav>

</header>

    



<div class="bg-cover pd-header post-cover" style="background-image: url('/medias/featureimages/5.jpg')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 class="description center-align post-title">css基础</h1>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="post-container content">

    
    <link rel="stylesheet" href="/libs/tocbot/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        width: 345px;
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        padding: 35px 0 15px 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content {
        padding-bottom: 30px;
        overflow: auto;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;

        position: absolute;
        right: 23.5vw;
        display: block;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/tags/css/">
                                <span class="chip bg-color">css</span>
                            </a>
                        
                            <a href="/tags/html/">
                                <span class="chip bg-color">html</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/" class="post-category">
                                前端技术
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i>Publish Date:&nbsp;&nbsp;
                    2021-03-08
                </div>
                

                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-check fa-fw"></i>Update Date:&nbsp;&nbsp;
                    2022-11-10
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-file-word fa-fw"></i>Word Count:&nbsp;&nbsp;
                    29.2k
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-clock fa-fw"></i>Read Times:&nbsp;&nbsp;
                    114 Min
                </div>
                

                
                    <div id="busuanzi_container_page_pv" class="info-break-policy">
                        <i class="far fa-eye fa-fw"></i>Read Count:&nbsp;&nbsp;
                        <span id="busuanzi_value_page_pv"></span>
                    </div>
				
            </div>
        </div>
        <hr class="clearfix">

        
        <!-- 是否加载使用自带的 prismjs. -->
        <link rel="stylesheet" href="/libs/prism/prism.css">
        

        

        <div class="card-content article-card-content">
            <div id="articleContent">
                <h1 id="css基础"><a href="#css基础" class="headerlink" title="css基础"></a>css基础</h1><h2 id="1-css简介"><a href="#1-css简介" class="headerlink" title="1  css简介"></a>1  css简介</h2><ul>
<li>CSS 指层叠样式表 (<strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets)</li>
<li>样式定义<strong>如何显示</strong> HTML 元素</li>
<li>样式通常存储在<strong>样式表</strong>中</li>
<li>把样式添加到 HTML 4.0 中，是为了<strong>解决内容与表现分离的问题</strong></li>
<li><strong>外部样式表</strong>可以极大提高工作效率</li>
<li>外部样式表通常存储在 <strong>CSS 文件</strong>中</li>
<li>多个样式定义可<strong>层叠</strong>为一个</li>
<li>样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。</li>
</ul>
<hr>
<h3 id="1-1-块元素"><a href="#1-1-块元素" class="headerlink" title="1.1 块元素"></a>1.1 块元素</h3><p>块元素的特点：</p>
<ol>
<li>自己独占一行。</li>
<li>高度，宽度，内外边距都可以控制。</li>
<li>宽度默认是容器(父级宽度的100%)。</li>
<li>是一个容器盒子，里面可以放行内元素或者块元素。</li>
</ol>
<p>注意：</p>
<ul>
<li>文字类的元素中不能使用块级元素。</li>
<li>&lt;p&gt; 标签中不能放块级元素，特别不能放&lt;div&gt;，会出错。</li>
</ul>
<h3 id="1-2-行内元素"><a href="#1-2-行内元素" class="headerlink" title="1.2 行内元素"></a>1.2 行内元素</h3><p>也被称为内联元素</p>
<p>行内元素的特点：</p>
<ol>
<li>相邻行内元素在一行上，一行可以显示多个。</li>
<li>高，宽直接设置是无效的。</li>
<li>默认宽度就是它本身内容的宽度。</li>
<li>行内元素只能容纳文本或是其他行内元素。</li>
</ol>
<p>注意：</p>
<ul>
<li>链接中不能放链接</li>
<li>链接中可以放置块级元素</li>
</ul>
<h2 id="1-3-行内块元素"><a href="#1-3-行内块元素" class="headerlink" title="1.3 行内块元素"></a>1.3 行内块元素</h2><p>在行内元素中，有几个特殊的标签—-   &lt;img/&gt;   &lt;input/&gt;   —-&lt;td&gt; 它同时具有块元素和行内元素的特点。</p>
<p>被称为行内块元素。</p>
<p>行内块元素特点：</p>
<ol>
<li>和相邻的行内元素在一行上，但是他们之间会有==空白缝隙==，一行可以显示多个行内块元素。</li>
<li>默认宽度就是它本身内容的宽度。</li>
<li>行高，高度，外边距和内边距都可以控制。</li>
</ol>
<table>
<thead>
<tr>
<th>元素模式</th>
<th>s元素排列</th>
<th>设置样式</th>
<th>默认宽度</th>
<th>包含</th>
<th>特例</th>
</tr>
</thead>
<tbody><tr>
<td>块元素</td>
<td>一行只能放一个块级元素</td>
<td>可以设置宽度和高度</td>
<td>容器的100%</td>
<td>可以包含任何标签</td>
<td>p标签不能放置div</td>
</tr>
<tr>
<td>行内元素</td>
<td>一行可以放置多个行内元素</td>
<td>不能直接设置宽度和高度</td>
<td>它本身内容的大小</td>
<td>容纳文本和行内元素</td>
<td>a标签可以放置块级元素</td>
</tr>
<tr>
<td>行内块元素</td>
<td>一行可以放置多个行内块元素</td>
<td>可以设置宽度和高度</td>
<td>它本身内容的大小</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h3 id="1-3-显示元素的转换"><a href="#1-3-显示元素的转换" class="headerlink" title="1.3 显示元素的转换"></a>1.3 显示元素的转换</h3><p>特殊情况下，需要将元素的显示模式进行转换。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>      //转换为块级元素
<span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span>		//转换为行内元素
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>		//转换为行内块元素<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>





<h2 id="2-css语法"><a href="#2-css语法" class="headerlink" title="2  css语法"></a>2  css语法</h2><p>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">//选择器	属性  ：  值            声明
	h1</span> <span class="token punctuation">&#123;</span>  <span class="token property">color</span>  <span class="token punctuation">:</span>  blue <span class="token punctuation">;</span> <span class="token property">font-size</span> <span class="token punctuation">:</span> 12xp <span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
	<span class="token selector">h1,h2</span> <span class="token punctuation">&#123;</span>  <span class="token property">color</span>  <span class="token punctuation">:</span>  blue <span class="token punctuation">;</span> <span class="token property">font-size</span> <span class="token punctuation">:</span> 12xp <span class="token punctuation">;</span> <span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p>选择器通常是您需要改变样式的 HTML 元素。</p>
<p>多个选择器用 , 号链接。</p>
<p>每条声明由一个属性和一个值组成。</p>
<p>属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。</p>
<p><a target="_blank" rel="noopener" href="https://www.runoob.com/try/try.php?filename=trycss_syntax1">实例</a></p>
<p>css</p>
<hr>
<h3 id="css属性书写顺序"><a href="#css属性书写顺序" class="headerlink" title="css属性书写顺序"></a>css属性书写顺序</h3><ul>
<li>布局定位属性: display    position    float    clear    visibility    overflow    <ul>
<li>自身属性: width height    margin    padding    border    background<ul>
<li>文本属性: color font text-decoration    text-align    vertical-align    white-space    break-word<ul>
<li>其他属性: content cursor border-radius text-shadow    background:linear-gradient</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="css注释"><a href="#css注释" class="headerlink" title="css注释"></a>css注释</h3><p>​    注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。    </p>
<p>​    CSS注释以 <strong>/*</strong> 开始, 以 ***/** 结束</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/*这是个注释*/</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>





<h3 id="css覆盖性"><a href="#css覆盖性" class="headerlink" title="css覆盖性"></a>css覆盖性</h3><p>​    当标签的css属性冲突的时候循序就近原则，当不冲突的时候会补充。</p>
<h3 id="css继承性"><a href="#css继承性" class="headerlink" title="css继承性"></a>css继承性</h3><p>​    子标签会继承父标签的某些样式，如文本和字号。</p>
<p>​    子元素可以继承(text-,font-,line-这些元素开头);</p>
<h4 id="行高的继承性"><a href="#行高的继承性" class="headerlink" title="行高的继承性"></a>行高的继承性</h4><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">&#123;</span>
	<span class="token property">font</span><span class="token punctuation">:</span> 12px/1.5 <span class="token string">'MIcrosoft YaHei'</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p>行高可以跟单位也可以不跟单位</p>
<p>如果子元素没有继承行高，则会继承父元素的行高。</p>
<p>子元素的行高为当前子元素的文字大小*1.5</p>
<h2 id="3-css选择器"><a href="#3-css选择器" class="headerlink" title="3.  css选择器"></a>3.  css选择器</h2><p>特定的选择器可以控制选定标签中的格式。</p>
<p>选择器就是选择标签使用的。</p>
<p>选择器分为基础选择器和复合选择器：</p>
<p>基础选择器： 标签选择器，类选择器，id选择器，通配符选择器</p>
<p>复合选择器：复合选择器建立在基础选择器之上。后代选择器，子选择器，并集选择器，伪类选择器</p>
<h3 id="3-1-id选择器-IS"><a href="#3-1-id选择器-IS" class="headerlink" title="3.1  id选择器(IS)"></a>3.1  id选择器(IS)</h3><p>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。</p>
<p>id选择器只允许一个对象使用，其他对象不允许使用。</p>
<p>HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。</p>
<p>ID选择器不要以数字开头，会有浏览器不起作用。</p>
<p>语法格式：**#S {…}**（S为选择器名）</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css">#id  <span class="token comment">/* #用来表示这是一个id选择器*/</span>
<span class="token punctuation">&#123;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="3-2-class选择器-CS"><a href="#3-2-class选择器-CS" class="headerlink" title="3.2  class选择器(CS)"></a>3.2  class选择器(CS)</h3><p>class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以<code>在多个元素中使用</code>。</p>
<p>class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示：</p>
<p>语法格式：**.S  {…}**（S为选择器名）</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.center</span> <span class="token punctuation">&#123;</span>			<span class="token comment">/*class选择器用.开头表示*/</span>
 <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p>class选择器不要以数字开头，会有浏览器不起作用。</p>
<h4 id="类选择器多类名："><a href="#类选择器多类名：" class="headerlink" title="类选择器多类名："></a>类选择器多类名：</h4><p>可以在标签的class属性中添加多个类名，多个类名中间必须用空格隔开。</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span> classname classname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
	多类名举例
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>







<h3 id="3-3-标签选择器-ES"><a href="#3-3-标签选择器-ES" class="headerlink" title="3.3  标签选择器(ES)"></a>3.3  标签选择器(ES)</h3><blockquote>
<p>标签选择器，又叫元素选择器，即以 html 标签作为 css 修饰所用的选择器。</p>
<p>语法格式：**S {…}**（S为标签名）</p>
<p>当出现并列两个相同名的选择器时，后一个会覆盖前一个。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">h3</span> <span class="token punctuation">&#123;</span>			<span class="token comment">/*h3为标签，选择相应html文件中的所有此标签*/</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>





<h3 id="3-4-包含选择器-PS"><a href="#3-4-包含选择器-PS" class="headerlink" title="3.4  包含选择器(PS)"></a>3.4  包含选择器(PS)</h3><blockquote>
<p>选择器选定特定结构：指定标签必须所包含在另一个指定标签中</p>
<p>语法格式：**A B {…}**（A、B为HTML元素/标签，表示对处于A中的B标签有效。）</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
p</span> <span class="token punctuation">&#123;</span>					<span class="token comment">/*标签选择器，选择p标签*/</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">div p</span> <span class="token punctuation">&#123;</span>				<span class="token comment">/*包含选择器。选择div标签中的p标签*/</span>
<span class="token property">color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.classname div p</span> <span class="token punctuation">&#123;</span>

<span class="token punctuation">&#125;</span>
&lt;/style>
&lt;p>red text&lt;/p>	&lt;!--文字是红色的-->
&lt;div>
&lt;p>yellow text&lt;/p>	&lt;!--文字是黄色的-->
&lt;/div><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="3-5-子选择器-SS"><a href="#3-5-子选择器-SS" class="headerlink" title="3.5  子选择器(SS)"></a>3.5  子选择器(SS)</h3><blockquote>
<p>类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许”子标签”甚至”子孙标签”及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签.</p>
<p>语法格式**：A&gt;B{…}**（A、B为HTML元素/标签）</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
div>p</span> <span class="token punctuation">&#123;</span>		<span class="token comment">/*只选定div标签中的p标签，其他标签不受影响*/</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
&lt;/style>
&lt;div>
&lt;p>red text&lt;/p>&lt;!--文字是红色的-->
&lt;table>
 &lt;tr>
   &lt;td>
     &lt;p>no red text<span class="token punctuation">;</span>&lt;/p>  &lt;!--文字是非红色的-->
   &lt;/td>
 &lt;/tr>
&lt;/table>
&lt;/div><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="3-6-兄弟选择器-BS"><a href="#3-6-兄弟选择器-BS" class="headerlink" title="3.6 兄弟选择器(BS)"></a>3.6 兄弟选择器(BS)</h3><blockquote>
<p>选择制定标签同为兄弟标签的标签</p>
<p>语法格式：**A~B{…}**（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
div~p</span> <span class="token punctuation">&#123;</span>			<span class="token comment">/*选择与div标签为兄弟标签的p标签*/</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
&lt;/style>
&lt;div>
&lt;p>no red text&lt;/p>&lt;!--文字是非红色的-->
&lt;div>no red text&lt;/div>
&lt;p>red text&lt;/p>&lt;!--文字是红色的-->
&lt;/div><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="3-7-通配符标签"><a href="#3-7-通配符标签" class="headerlink" title="3.7 通配符标签"></a>3.7 通配符标签</h3><blockquote>
<p>语法形式为：***  {属性：属性值} **。它的作用是匹配 html 中的所有元素标签。</p>
<p>通用选择器不需要调用就可以执行。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">*</span> <span class="token punctuation">&#123;</span>		<span class="token comment">/*匹配html中所有标签*/</span>
 margin： 0；
	padding： 0；
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="3-8-并集选择器"><a href="#3-8-并集选择器" class="headerlink" title="3.8 并集选择器"></a>3.8 并集选择器</h3><blockquote>
<p>将两个选择题通过逗号链接，同时设置两个选择器的样式，任何选择器都可以作为并集选择器的一部分</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p,a,div,#id</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>





<h3 id="3-8-伪类选择器"><a href="#3-8-伪类选择器" class="headerlink" title="3.8 伪类选择器"></a>3.8 伪类选择器</h3><blockquote>
<p>用于向某些选择器添加特殊的效果，比如给来链接添加特殊的效果，或者选择第一个或是第n个元素。 </p>
</blockquote>
<blockquote>
<p>伪类选择器有：链接伪类，结构伪类</p>
<p>链接伪类：    ==为了确保能生效按照以下顺序==</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">a:link</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>    <span class="token selector">//选择所有未被访问的标签
a:visited</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>	<span class="token selector">//选择所有已经被访问的标签
a:hover</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>		<span class="token selector">//选择鼠标指针位于其上的链接
a:action</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>		<span class="token selector">//选择活动链接
input:focus</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>      //选择获得光标的表单元素<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="3-10-复合选择器"><a href="#3-10-复合选择器" class="headerlink" title="3.10  复合选择器"></a>3.10  复合选择器</h3><blockquote>
<p>可以通过标签和标签中的class，id属性定位到要设置的标签。</p>
<p>标签名.class属性名       标签名#属性名</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
    <span class="token selector">p.ClassName</span> <span class="token punctuation">&#123;</span>
        <span class="token property">text-transform</span><span class="token punctuation">:</span>uppercase<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    <span class="token selector">p#IdName</span> <span class="token punctuation">&#123;</span>							<span class="token comment">/*选择含制定id的标签*/</span>
        <span class="token property">text-transform</span><span class="token punctuation">:</span>lowercase
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<hr>
<table>
<thead>
<tr>
<th>选择器</th>
<th>作用</th>
<th>特征</th>
<th>使用情况</th>
<th>隔开符号及用法</th>
</tr>
</thead>
<tbody><tr>
<td>后代选择器</td>
<td>选择后代元素</td>
<td>子孙后代</td>
<td>较多</td>
<td>空格 .nav a</td>
</tr>
<tr>
<td>子代选择器</td>
<td>选择最近一级元素</td>
<td>直系后代</td>
<td>较少</td>
<td>大于号 .nav &gt; p</td>
</tr>
<tr>
<td>并集选择器</td>
<td>选择某些相同样式的元素</td>
<td>集体声明</td>
<td>较多</td>
<td>逗号 .nav，p</td>
</tr>
<tr>
<td>连接伪类选择器</td>
<td>选择不同状态的元素</td>
<td>链接</td>
<td>较多</td>
<td>重点:hover {}</td>
</tr>
<tr>
<td>：focus选择器</td>
<td>选择获取焦点的表单</td>
<td>表单</td>
<td>较少</td>
<td>input:focus {}</td>
</tr>
</tbody></table>
<h3 id="3-9-选择器权重"><a href="#3-9-选择器权重" class="headerlink" title="3.9 选择器权重"></a>3.9 选择器权重</h3><blockquote>
<p>复合选择器会有权重叠加的问题。</p>
<p>权重只会叠加，不会进位。</p>
</blockquote>
<table>
<thead>
<tr>
<th>选择器</th>
<th>权重</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>继承或者 *</td>
<td>0.0.0.0</td>
<td></td>
</tr>
<tr>
<td>标签选择器，伪元素</td>
<td>0.0.0.1</td>
<td></td>
</tr>
<tr>
<td>类选择器，伪类选择器</td>
<td>0.0.1.0</td>
<td></td>
</tr>
<tr>
<td>ID选择器</td>
<td>0.1.0.0</td>
<td></td>
</tr>
<tr>
<td>行内样式</td>
<td>1.0.0.0</td>
<td></td>
</tr>
<tr>
<td>!important 重要的</td>
<td>无穷大</td>
<td></td>
</tr>
</tbody></table>
<h2 id="4-css样式表"><a href="#4-css样式表" class="headerlink" title="4  css样式表"></a>4  css样式表</h2><blockquote>
<p>插入样式表的方法有三种:</p>
<ul>
<li>外部样式表(External style sheet)</li>
<li>内部样式表(Internal style sheet)</li>
<li>内联样式(Inline style)</li>
</ul>
</blockquote>
<h3 id="4-1-外部样式表"><a href="#4-1-外部样式表" class="headerlink" title="4.1   外部样式表"></a>4.1   外部样式表</h3><blockquote>
<p>​    当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 &lt;link&gt; 标签链接到样式表。 &lt;link&gt; 标签在（文档的）头部(&lt;head&gt;标签中)：</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css">&lt;head>
&lt;link rel=<span class="token string">"stylesheet"</span> type=<span class="token string">"text/css"</span> href=<span class="token string">"文档名.css(路径)"</span>>
&lt;/head><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>



<blockquote>
<p>浏览器会从 .css 文件中读到样式声明，并根据它来格式文档。</p>
<p>外部样式表可以在任何文本编辑器中进行编辑。文件不能包含<code>任何的 html 标签</code>。样式表应该以 .css 扩展名进行保存。</p>
<p>:facepunch:<em>不要在属性值与单位之间留有空格（如：”margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。</em></p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
 <span class="token property">margin-left</span><span class="token punctuation">:</span> 20xp 
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>



<h3 id="4-2-内部样式表"><a href="#4-2-内部样式表" class="headerlink" title="4.2  内部样式表"></a>4.2  内部样式表</h3><blockquote>
<p>当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 &lt;style&gt; 标签在文档头部定义内部样式表.(理论上可以放到任意位置，最好放在头部)</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;head>
	&lt;style>
		hr</span> <span class="token punctuation">&#123;</span><span class="token property">color</span><span class="token punctuation">:</span>sienna<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>
		<span class="token selector">p</span> <span class="token punctuation">&#123;</span><span class="token property">margin-left</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>
		<span class="token selector">body</span> <span class="token punctuation">&#123;</span><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"images/back40.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span><span class="token punctuation">&#125;</span>
	&lt;/style>
&lt;/head><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="4-3-内联样式"><a href="#4-3-内联样式" class="headerlink" title="4.3  内联样式"></a>4.3  内联样式</h3><blockquote>
<p>在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。但是损失掉样式表的许多优势。       </p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css">&lt;p style=<span class="token string">"color:sienna;margin-left:20px;"</span>>内联样式举例&lt;/p><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>



<h3 id="4-4-多重样式"><a href="#4-4-多重样式" class="headerlink" title="4.4  多重样式"></a>4.4  多重样式</h3><blockquote>
<p>如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来(若是相同的属性将会以优先级高的覆盖优先级低的)。</p>
<p><strong>（内联样式）Inline style &gt; （内部样式）Internal style sheet &gt;（外部  样式）External style sheet &gt; 浏览器默认样式</strong></p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/*外部样式表*/</span>
<span class="token selector">h3</span>
<span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span>8pt<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">/*内部样式表*/</span>
<span class="token selector">h3</span>
<span class="token punctuation">&#123;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span>20pt<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">/*实际h3的样式是：*/</span>
<span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span>20pt<span class="token punctuation">;</span>		<span class="token comment">/*因为内部样式表的优先级会高于外部样式表，所以会被内部样式表覆盖相同属性。*/</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="4-5-多重样式优先级"><a href="#4-5-多重样式优先级" class="headerlink" title="4.5   多重样式优先级"></a>4.5   多重样式优先级</h3><blockquote>
<p>下列是一份优先级<code>逐级增加</code>的选择器列表：</p>
<ul>
<li>通用选择器（*）</li>
<li>元素(类型)选择器</li>
<li>类选择器</li>
<li>属性选择器</li>
<li>伪类</li>
<li>ID 选择器</li>
<li>内联样式</li>
</ul>
</blockquote>
<hr>
<h2 id="5-Background-背景"><a href="#5-Background-背景" class="headerlink" title="5  Background(背景)"></a>5  Background(背景)</h2><blockquote>
<p>CSS 背景属性用于定义HTML元素的背景。</p>
<p>常用于超大的图片或者装饰的小图片，精灵图。非常容易修改位置。</p>
</blockquote>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>background</td>
<td>简写属性，作用是将背景属性设置在一个声明中。</td>
<td></td>
</tr>
<tr>
<td>background-attachment</td>
<td>背景图像是否固定或者随着页面的其余部分滚动。</td>
<td></td>
</tr>
<tr>
<td>background-color</td>
<td>设置元素的背景颜色。</td>
<td></td>
</tr>
<tr>
<td>background-image</td>
<td>把图像设置为背景。</td>
<td></td>
</tr>
<tr>
<td>background-position</td>
<td>设置背景图像的起始位置。</td>
<td></td>
</tr>
<tr>
<td>background-repeat</td>
<td>设置背景图像是否及如何重复。</td>
<td></td>
</tr>
<tr>
<td>background-color: rgba()</td>
<td>设置背景颜色透明</td>
<td></td>
</tr>
</tbody></table>
<h3 id="常见图片格式："><a href="#常见图片格式：" class="headerlink" title="常见图片格式："></a>常见图片格式：</h3><p>1.jpg图像格式：JPEG、(JPG)对色彩的信息保存较好，高清，颜色多，产品类的图片常用jpg格式。</p>
<p>2.gif图像格式：GIF格式最多只能存储256色，所有通常用来显示简单的图形及字体，但是可以保存透明背景和动画效果。用于小动画。</p>
<p>3.png图像格式是一种新兴的网络图形格式，结合GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。用于透明图片。</p>
<p>4.PSD图片格式是photoshop的专用格式，可以存储图层，通道，遮罩等多种设计稿。可以从上面直接复制文字，获得图片，还可以测量大小和距离。</p>
<h3 id="5-1-背景颜色"><a href="#5-1-背景颜色" class="headerlink" title="5.1   背景颜色"></a>5.1   背景颜色</h3><blockquote>
<p>background-color 属性定义了元素的背景颜色.</p>
<p>默认为：background-color: transparent；  透明的</p>
<p>选择器 {background-color:颜色代码;}</p>
</blockquote>
<p>CSS中，颜色值通常以以下方式定义:</p>
<ul>
<li>十六进制 - 如：#ff0000</li>
<li>RGB - 如：rgb(255,0,0)</li>
<li>颜色名称 - 如：red</li>
</ul>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">例：
body</span> <span class="token punctuation">&#123;</span><span class="token property">background-color</span><span class="token punctuation">:</span>#e0ffff<span class="token punctuation">;</span><span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<h3 id="5-2-背景图像"><a href="#5-2-背景图像" class="headerlink" title="5.2  背景图像"></a>5.2  背景图像</h3><blockquote>
<p>页面元素既可以添加背景图片，也可以添加背景颜色，只不过背景图片会压住背景颜色。</p>
</blockquote>
<blockquote>
<p>background-image 属性描述了元素的背景图像.</p>
<p>常用于logo或者一些装饰性的小图片或者超大的背景图片，便于控制位置。</p>
<p>默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">// 选择器&#123;
	background-image:url(文件路径);
&#125;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">&#123;</span><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>图片名.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span><span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h3 id="5-3-背景图像-水平或者垂直平铺"><a href="#5-3-背景图像-水平或者垂直平铺" class="headerlink" title="5.3  背景图像-水平或者垂直平铺"></a>5.3  背景图像-水平或者垂直平铺</h3><blockquote>
<p>默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。</p>
<p>background-repeat:repeat-x;       设置背景图像只在水平平铺</p>
<p>background-repeat:repeat-y;        设置背景图片只在垂直平铺</p>
<p>background-repeat:no-repeat；    设置背景图片不平铺</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">选择器</span>
<span class="token punctuation">&#123;</span>
<span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'图片路径'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token property">background-repeat</span><span class="token punctuation">:</span>repeat-x<span class="token punctuation">;</span>	//设置背景图像只在水平平铺
或者 <span class="token property">background-repeat</span><span class="token punctuation">:</span>repeat-y<span class="token punctuation">;</span>	//设置背景图片只在垂直平铺
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>









<h3 id="5-4-背景图像-设置位置"><a href="#5-4-背景图像-设置位置" class="headerlink" title="5.4   背景图像-设置位置"></a>5.4   背景图像-设置位置</h3><blockquote>
<p>可以改变图像的位置。</p>
<p>如果指定的两个值都是方位名词，则两个值的前后顺序无关，如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐</p>
<p>可以利用 background-position 属性改变图像在背景中的位置:</p>
<p>background-position:right top;    设置图像位置：右方</p>
<p>background-position:center top;    设置图像位置：中间</p>
<p>background-position:left top;           设置图像位置：左方</p>
<p>如果指定的两个值为精确单位，则第一个值一定是x方向第二个值一定是y方向。</p>
<p>background-position:横坐标px 纵坐标px      设置图像位置</p>
<p>如果指定的两个值为混合单位，则第一个值一定是x方向第二个值一定是y方向。</p>
<p>background-position: 方向 纵坐标px      混合使用</p>
<p>background-position: 横坐标px 方向      混合使用</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">选择器</span><span class="token punctuation">&#123;</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'图像路径'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>		//设置背景图像
	<span class="token property">background-repeat</span><span class="token punctuation">:</span>no-repeat<span class="token punctuation">;</span>		  //设置背景图像不重复
	<span class="token property">background-position</span><span class="token punctuation">:</span>right top<span class="token punctuation">;</span>			//设置图片位置
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="5-5-背景图像-简写属性"><a href="#5-5-背景图像-简写属性" class="headerlink" title="5.5  背景图像-简写属性"></a>5.5  背景图像-简写属性</h3><blockquote>
<p>可以将这些属性合并在同一个属性中.</p>
<p>选择器名 {background:颜色代码 url(‘图片路径’) 设置是否以及怎样平铺 设置左右中间位置</p>
</blockquote>
<pre class="line-numbers language-none"><code class="language-none">例子：
&#x2F;&#x2F;设置不重复平铺，且背景图片靠右
选择器 &#123;background:#ffffff url(&#39;图片路径&#39;) no-repeat right top;&#125;  <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>



<h3 id="5-6-背景图像-是否能随页面滚动"><a href="#5-6-背景图像-是否能随页面滚动" class="headerlink" title="5.6  背景图像-是否能随页面滚动"></a>5.6  背景图像-是否能随页面滚动</h3><blockquote>
<p>background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。</p>
<p>background-attachment:scroll;    背景图片随着页面的滚动而滚动，这是默认的。</p>
<p>background-attachment:fixed;    背景图片不会随着页面的滚动而滚动。</p>
<p>background-attachment:local;    背景图片会随着元素内容的滚动而滚动。</p>
<p>background-attachment:initial;    设置该属性的默认值。</p>
<p>background-attachment:inherit;    指定 background-attachment 的设置应该从父元素继承。</p>
</blockquote>
<h3 id="5-7-背景图像-半透明"><a href="#5-7-背景图像-半透明" class="headerlink" title="5.7 背景图像-半透明"></a>5.7 背景图像-半透明</h3><blockquote>
<p>设置背景图像的颜色及透明度：</p>
<p>background: rgba(红度，绿度，蓝度，透明度)</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0，0，0，0.6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0，0，0，.6<span class="token punctuation">)</span><span class="token punctuation">;</span>      //可以省略0<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>





<h3 id="5-8-background-size"><a href="#5-8-background-size" class="headerlink" title="5.8 background-size"></a>5.8 background-size</h3><blockquote>
<p>background-size属性用来指定背景图像的大小：</p>
</blockquote>
<blockquote>
<ul>
<li>可选： 长度 | 百分比 | cover | contain</li>
<li>指定长度时，只指定一个数字，会等比例缩放。</li>
<li>百分比为父盒子的宽度和高度。只指定一个百分比，会等比例缩放。</li>
<li>cover把背景图片扩展至足够大，以背景图像完全覆盖背景区域。可能会显示不全。</li>
<li>contain把图像扩展到最大尺寸，以使高度或者宽度完全适应内容区域。可能会出现空白区域。</li>
</ul>
</blockquote>
<table>
<thead>
<tr>
<th align="left">值</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">length</td>
<td align="left">设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 <strong>auto</strong>(自动)</td>
</tr>
<tr>
<td align="left">percentage</td>
<td align="left">将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”auto(自动)”</td>
</tr>
<tr>
<td align="left">cover</td>
<td align="left">此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。</td>
</tr>
<tr>
<td align="left">contain</td>
<td align="left">此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。</td>
</tr>
</tbody></table>
<h3 id="5-9-背景属性综合"><a href="#5-9-背景属性综合" class="headerlink" title="5.9 背景属性综合"></a>5.9 背景属性综合</h3><blockquote>
<p>背景属性可以简写使用</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token property">background</span><span class="token punctuation">:</span> 背景颜色 背景图片 背景平铺 是否滚动 图片位置；<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>



<h2 id="5-shadow-阴影"><a href="#5-shadow-阴影" class="headerlink" title="5# shadow(阴影)"></a>5# shadow(阴影)</h2><blockquote>
<p>可以使用box-shadow属性为盒子添加阴影。</p>
<p>可以使用text-shadow属性为文字添加阴影。</p>
<p>阴影不占用空间。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css">box-shadow： 水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色；
text-shadow：  水平阴影位置 垂直阴影位置 模糊距离  阴影颜色；<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>h-shadow</td>
<td>必需。水平阴影的位置。允许负值。</td>
</tr>
<tr>
<td>v-shadow</td>
<td>必需。垂直阴影的位置。允许负值。</td>
</tr>
<tr>
<td>blur</td>
<td>可选。模糊距离。</td>
</tr>
<tr>
<td>spread</td>
<td>可选。阴影的尺寸。</td>
</tr>
<tr>
<td>color</td>
<td>可选。阴影的颜色。</td>
</tr>
<tr>
<td>inset</td>
<td>可选。将外部阴影改为内部阴影。</td>
</tr>
</tbody></table>
<h3 id="5-10-背景图片-精灵图"><a href="#5-10-背景图片-精灵图" class="headerlink" title="5.10 背景图片-精灵图"></a>5.10 背景图片-精灵图</h3><blockquote>
<p>精灵图主要针对于背景图片的使用，把多个小背景图片整合到一整张大背景图片中，通过背景显示区域来减少向服务器发送次数。</p>
<p>移动背景图片使用： background-position属性。</p>
<p>移动距离就是这个目标图片的x,y坐标。一般情况是向上向左移动，一般是负值。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token property">bacground-position</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>路径<span class="token punctuation">)</span></span> x y <span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>



<h3 id="5-11-字体图标"><a href="#5-11-字体图标" class="headerlink" title="5.11 字体图标"></a>5.11 字体图标</h3><blockquote>
<p>展示的是图标，本质是字体。</p>
<ul>
<li>轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求。</li>
<li>灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，选装等。</li>
<li>兼容性：几乎支持所有的浏览器。</li>
</ul>
</blockquote>
<blockquote>
<p>使用流程： 下载相应的字体图标 –&gt; 放入根目录  –&gt; 在css中声明引入</p>
</blockquote>
<h2 id="6-Text-文本"><a href="#6-Text-文本" class="headerlink" title="6  Text(文本)"></a>6  Text(文本)</h2><p>所有文本属性：</p>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">color</td>
<td align="left">设置文本颜色</td>
</tr>
<tr>
<td align="left">direction</td>
<td align="left">设置文本方向。</td>
</tr>
<tr>
<td align="left">letter-spacing</td>
<td align="left">设置字符间距(字母之间的间距)</td>
</tr>
<tr>
<td align="left">line-height</td>
<td align="left">设置行高</td>
</tr>
<tr>
<td align="left">text-align</td>
<td align="left">对齐元素中的文本</td>
</tr>
<tr>
<td align="left">text-decoration</td>
<td align="left">向文本添加修饰</td>
</tr>
<tr>
<td align="left">text-indent</td>
<td align="left">缩进元素中文本的首行</td>
</tr>
<tr>
<td align="left">text-shadow</td>
<td align="left">设置文本阴影</td>
</tr>
<tr>
<td align="left">text-transform</td>
<td align="left">控制元素中的字母</td>
</tr>
<tr>
<td align="left">unicode-bidi</td>
<td align="left">设置或返回文本是否被重写</td>
</tr>
<tr>
<td align="left">vertical-align</td>
<td align="left">设置元素的垂直对齐</td>
</tr>
<tr>
<td align="left">white-space</td>
<td align="left">设置元素中空白的处理方式</td>
</tr>
<tr>
<td align="left">word-spacing</td>
<td align="left">设置字间距(单词之间的间距)</td>
</tr>
</tbody></table>
<h3 id="6-1-文本颜色"><a href="#6-1-文本颜色" class="headerlink" title="6.1 文本颜色"></a>6.1 文本颜色</h3><blockquote>
<p>颜色属性被用来设置文字的颜色。</p>
<ul>
<li>十六进制值 - 如: <strong>＃FF0000</strong></li>
<li>一个RGB值 - 如: <strong>RGB(255,0,0)</strong></li>
<li>颜色的名称 - 如: <strong>red</strong></li>
</ul>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
	<span class="token selector">body</span> <span class="token punctuation">&#123;</span><span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>          <span class="token selector">//预定义的颜色值
	h1</span> <span class="token punctuation">&#123;</span><span class="token property">color</span><span class="token punctuation">:</span>#00ff00<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>    <span class="token selector">//十六进制
	h2</span> <span class="token punctuation">&#123;</span><span class="token property">color</span><span class="token punctuation">:</span><span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">&#125;</span>    //rgb颜色
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>	<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="6-2-文本的对齐方式"><a href="#6-2-文本的对齐方式" class="headerlink" title="6.2   文本的对齐方式"></a>6.2   文本的对齐方式</h3><blockquote>
<p>文本排列属性是用来设置文本的==水平==对齐方式。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token comment">&lt;!--设置文本居中--></span>
选择器 &#123;text-align:center;&#125; 

<span class="token comment">&lt;!--设置文本右对齐--></span>
选择器 &#123;text-align:right;&#125;

<span class="token comment">&lt;!--设置文本左对齐--></span>
选择器 &#123;text-align:left;&#125;

<span class="token comment">&lt;!--设置文本每一行被展开宽度相等（如杂志和报纸）--></span>
选择器 &#123;text-align:justify;&#125;
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="6-3-文本修饰"><a href="#6-3-文本修饰" class="headerlink" title="6.3   文本修饰"></a>6.3   文本修饰</h3><blockquote>
<p>text-decoration 属性用来设置或删除文本的装饰。上划线，下划线，删除线。</p>
<p>text-decoration属性主要是用来删除超链接的下划线</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
		<span class="token selector">a</span> <span class="token punctuation">&#123;</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">&#125;</span> <span class="token comment">/*设置body标签中的超链接无下划线*/</span>
	</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
	 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//www.runoob.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>runoob.com<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>overline<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>         <span class="token comment">/*设置文本上划线*/</span>
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>line-through<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>		<span class="token comment">/*设置文本删除线*/</span>
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>underline<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>		<span class="token comment">/*设置文本下划线*/</span>
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>		<span class="token comment">/*设置文本无装饰(多用于删除超链接下划线)*/</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="6-4-文本转换"><a href="#6-4-文本转换" class="headerlink" title="6.4   文本转换"></a>6.4   文本转换</h3><blockquote>
<p> 文本转换属性是用来指定在一个文本中的大写和小写字母。</p>
<p> 可用于所有字句变成大写或小写字母，或每个单词的首字母大写。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">text-transform</span><span class="token punctuation">:</span>uppercase<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>  <span class="token comment">/*设置文本全部大写*/</span>
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">text-transform</span><span class="token punctuation">:</span>lowercase<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>	<span class="token comment">/*设置文本全部小写*/</span>
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">text-transform</span><span class="token punctuation">:</span>capitalize<span class="token punctuation">;</span><span class="token punctuation">&#125;</span> <span class="token comment">/*设置文本开头字母大写*/</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="6-5-文本缩进"><a href="#6-5-文本缩进" class="headerlink" title="6.5   文本缩进"></a>6.5   文本缩进</h3><blockquote>
<p>文本缩进属性是用来指定文本的第一行的缩进</p>
<p>可以设置像素，也可以用百分比。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
    <span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">text-indent</span><span class="token punctuation">:</span>缩进像素xp<span class="token punctuation">&#125;</span>  <span class="token comment">/*设置文本首行缩进的像素*/</span>
    <span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">text-indent</span><span class="token punctuation">:</span>缩进字符个数em<span class="token punctuation">&#125;</span>  <span class="token comment">/*设置文本首行缩进的像素*/</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="6-6-文本间距"><a href="#6-6-文本间距" class="headerlink" title="6.6   文本间距"></a>6.6   文本间距</h3><blockquote>
<p>控制字符(字母)之间的间距：letter-spacing:间距px;（汉字多用于此）</p>
<p>控制字(单词)间距：word-spacing:间距px;</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
    <span class="token selector">选择器</span><span class="token punctuation">&#123;</span>
        <span class="token property">letter-spacing</span><span class="token punctuation">:</span>间距px<span class="token punctuation">;</span>	<span class="token comment">/*设置字符(字母)之间的间距*/</span>
        <span class="token property">word-spacing</span><span class="token punctuation">:</span>间距px<span class="token punctuation">;</span>		<span class="token comment">/*设置控制字(单词)间距*/</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="6-7-行间距"><a href="#6-7-行间距" class="headerlink" title="6.7 行间距"></a>6.7 行间距</h3><blockquote>
<p>line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
  <span class="token selector">选择器</span> <span class="token punctuation">&#123;</span>
    <span class="token property">line-height</span><span class="token punctuation">:</span> 26px<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<blockquote>
</blockquote>
<h2 id="7-字体"><a href="#7-字体" class="headerlink" title="7   字体"></a>7   字体</h2><blockquote>
<p>在CSS中，有两种类型的字体系列名称：</p>
<ul>
<li><strong>通用字体系列</strong> - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）</li>
<li><strong>特定字体系列</strong> - 一个特定的字体系列（如 “Times” 或 “Courier”）</li>
</ul>
</blockquote>
<table>
<thead>
<tr>
<th align="left">Property</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">font</td>
<td align="left">在一个声明中设置所有的字体属性</td>
</tr>
<tr>
<td align="left">font-family</td>
<td align="left">指定文本的字体系列</td>
</tr>
<tr>
<td align="left">font-size</td>
<td align="left">指定文本的字体大小</td>
</tr>
<tr>
<td align="left">font-style</td>
<td align="left">指定文本的字体样式</td>
</tr>
<tr>
<td align="left">font-variant</td>
<td align="left">以小型大写字体或者正常字体显示文本。</td>
</tr>
<tr>
<td align="left">font-weight</td>
<td align="left">指定字体的粗细。</td>
</tr>
</tbody></table>
<h3 id="7-1-字体系列"><a href="#7-1-字体系列" class="headerlink" title="7.1  字体系列"></a>7.1  字体系列</h3><blockquote>
<p>font-family 属性设置文本的字体系列。</p>
<p>font-family 属性应该设置几个字体名称作为一种”后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体。多个字体之间使用逗号隔开。</p>
<p><strong>注意</strong>: 如果字体系列的名称超过一个字或者一个单词，它必须用引号，如Font Family：”宋体”。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
    <span class="token selector">选择器</span> <span class="token punctuation">&#123;</span>
      <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Times New Roman"</span><span class="token punctuation">,</span> Times<span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>​    主要给body标签指定字体：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">&#123;</span>
	<span class="token property">font-family</span><span class="token punctuation">:</span> 指定字体；
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>



<h3 id="7-2-字体样式"><a href="#7-2-字体样式" class="headerlink" title="7.2   字体样式"></a>7.2   字体样式</h3><blockquote>
<p>主要是用于指定斜体文字的字体样式属性。</p>
<p>这个属性有三个值：</p>
<ul>
<li>正常 - 正常显示文本</li>
<li>斜体 - 以斜体字显示的文字</li>
<li>倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）</li>
</ul>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">font-style</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>   <span class="token comment">/*设置正常文本格式*/</span>
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">font-style</span><span class="token punctuation">:</span>italic<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>   <span class="token comment">/*设置斜体文本格式*/</span>
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">font-style</span><span class="token punctuation">:</span>oblique<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>   <span class="token comment">/*设置倾斜的文字文本格式*/</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="7-3-字体大小"><a href="#7-3-字体大小" class="headerlink" title="7.3 字体大小"></a>7.3 字体大小</h3><blockquote>
<p>font-size 属性设置文本的大小。</p>
<p>字体大小的值可以是绝对或相对的大小。</p>
<p>标题标签比较特殊，需要单独指定文字大小。</p>
<p><code>绝对大小</code>：</p>
<ul>
<li>设置一个指定大小的文本</li>
<li>不允许用户在所有浏览器中改变文本大小</li>
<li>确定了输出的物理尺寸时绝对大小很有用</li>
</ul>
<p><code>相对大小</code>：</p>
<ul>
<li>相对于周围的元素来设置大小</li>
<li>允许用户在浏览器中改变文字大小</li>
</ul>
</blockquote>
<h4 id="以像素设置字体大小"><a href="#以像素设置字体大小" class="headerlink" title="以像素设置字体大小"></a>以像素设置字体大小</h4><blockquote>
<p>设置文字的大小与像素，完全控制文字大小</p>
<p>可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p>
<p>虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
	<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span><span class="token property">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>		<span class="token comment">/*以像素设置文字大小*/</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>



<h4 id="以em来设置字体大小"><a href="#以em来设置字体大小" class="headerlink" title="以em来设置字体大小"></a>以em来设置字体大小</h4><blockquote>
<p>1em的默认大小是16px。可以通过下面这个公式将像素转换为em：<strong>px/16=em</strong></p>
<p>em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。</p>
<p>IE浏览器调整文本的大小时，会比正常的尺寸更大或更小。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
	<span class="token selector">h1</span> <span class="token punctuation">&#123;</span><span class="token property">font-size</span><span class="token punctuation">:</span>2.5em<span class="token punctuation">;</span><span class="token punctuation">&#125;</span> <span class="token comment">/*以cm来设置字体大小*/</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>



<h4 id="以百分比和em组合设置字体大小"><a href="#以百分比和em组合设置字体大小" class="headerlink" title="以百分比和em组合设置字体大小"></a>以百分比和em组合设置字体大小</h4><blockquote>
<p>在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。</p>
</blockquote>
<pre><code>body &#123;font-size:100%;&#125;  &lt;!--设置 &lt;body&gt;元素的默认字体大小的是百分比--&gt;
选择器 &#123;font-size:2.5em;&#125;
</code></pre>
<h3 id="7-4-字体加粗"><a href="#7-4-字体加粗" class="headerlink" title="7.4 字体加粗"></a>7.4 字体加粗</h3><blockquote>
<p>文字字体使用font-weight属性控制</p>
<p>font-weight属性值： </p>
<table>
<thead>
<tr>
<th>值</th>
<th>含义</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>normal</td>
<td>正常不加粗</td>
<td>默认值  400</td>
</tr>
<tr>
<td>bold</td>
<td>加粗</td>
<td>相当于number为700</td>
</tr>
<tr>
<td>bolder</td>
<td>特粗</td>
<td></td>
</tr>
<tr>
<td>lighter</td>
<td>特细</td>
<td></td>
</tr>
<tr>
<td>number</td>
<td>指定粗细</td>
<td></td>
</tr>
</tbody></table>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
  <span class="token selector">选择器</span> <span class="token punctuation">&#123;</span>
    	font-weight： 400；
  <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="7-5-字体复合写法"><a href="#7-5-字体复合写法" class="headerlink" title="7.5 字体复合写法"></a>7.5 字体复合写法</h3><blockquote>
<p>字体属性可以将文字样式综合来写，这样可以更节约代码。</p>
<p>符合形式需要有语法规范，有固定的顺序。</p>
<p>使用符合写法必须保留font-size和font-family属性，否则font属性将不起作用。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
body</span><span class="token punctuation">&#123;</span>
 <span class="token property">font</span><span class="token punctuation">:</span> font-style font-weight font-size/line-height font-family
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>






<h2 id="8-链接"><a href="#8-链接" class="headerlink" title="8   链接"></a>8   链接</h2><blockquote>
<p>不同的链接可以有不同的样式</p>
<p>可以改变链接点击，未点击，鼠标选中时的：</p>
<p>文本颜色，背景颜色，字体，修饰，字体大小。</p>
</blockquote>
<h3 id="8-1-链接样式"><a href="#8-1-链接样式" class="headerlink" title="8.1  链接样式"></a>8.1  链接样式</h3><blockquote>
<p>链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。</p>
<p>使用的是伪类。且有使用顺序需要注意哦。</p>
<p>特别的链接，可以有不同的样式，这取决于他们是什么状态。</p>
<p>这四个链接状态是：</p>
<ul>
<li>选择器 :link - 正常，未访问过的链接</li>
<li>选择器 :visited - 用户已访问过的链接</li>
<li>选择器 :hover - 当用户鼠标放在链接上时</li>
<li>选择器 :active - 链接被点击的那一刻</li>
</ul>
<p>注意：</p>
<ul>
<li>a:hover 必须跟在 a:link 和 a:visited后面</li>
<li>a:active 必须跟在 a:hover后面</li>
<li>link和visited是常驻属性，而active和hover是常驻属性中的改变属性。(设置好link和visited后，只需要更改active和hover少量属性，发生动作时，就会在link和visited基础上做出改变。)</li>
</ul>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
	<span class="token selector">a:link</span> <span class="token punctuation">&#123;</span><span class="token property">color</span><span class="token punctuation">:</span>#000000<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>      <span class="token comment">/* 设置未访问链接颜色*/</span>
	<span class="token selector">a:visited</span> <span class="token punctuation">&#123;</span><span class="token property">color</span><span class="token punctuation">:</span>#00FF00<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>  <span class="token comment">/* 设置已访问链接颜色 */</span>
	<span class="token selector">a:hover</span> <span class="token punctuation">&#123;</span><span class="token property">color</span><span class="token punctuation">:</span>#FF00FF<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>  <span class="token comment">/* 设置鼠标移动到链接上颜色 */</span>
	<span class="token selector">a:active</span> <span class="token punctuation">&#123;</span><span class="token property">color</span><span class="token punctuation">:</span>#0000FF<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>  <span class="token comment">/* 设置鼠标点击时颜色 */</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="8-2-文本修饰"><a href="#8-2-文本修饰" class="headerlink" title="8.2  文本修饰"></a>8.2  文本修饰</h3><blockquote>
<p>text-decoration 属性主要用于删除链接中的下划线：</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">a:link</span> <span class="token punctuation">&#123;</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>    <span class="token comment">/* 设置未访问链接无下划线 */</span>
<span class="token selector">a:visited</span> <span class="token punctuation">&#123;</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">&#125;</span> <span class="token comment">/* 设置已经访问链接无下划线*/</span>
<span class="token selector">a:hover</span> <span class="token punctuation">&#123;</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>underline<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>   <span class="token comment">/* 设置鼠标放到连接上时有下划线*/</span>
<span class="token selector">a:active</span> <span class="token punctuation">&#123;</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>underline<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>  <span class="token comment">/* 设置点击时有下划线 */</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>







<h3 id="8-3-文本颜色"><a href="#8-3-文本颜色" class="headerlink" title="8.3  文本颜色"></a>8.3  文本颜色</h3><blockquote>
<p>背景颜色属性指定链接背景色：</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">选择器 :link</span> <span class="token punctuation">&#123;</span><span class="token property">background-color</span><span class="token punctuation">:</span>#B2FF99<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>    <span class="token comment">/* 未访问链接 */</span>
<span class="token selector">选择器 :visited</span> <span class="token punctuation">&#123;</span><span class="token property">background-color</span><span class="token punctuation">:</span>#FFFF85<span class="token punctuation">;</span><span class="token punctuation">&#125;</span> <span class="token comment">/* 已访问链接 */</span>
<span class="token selector">选择器 :hover</span> <span class="token punctuation">&#123;</span><span class="token property">background-color</span><span class="token punctuation">:</span>#FF704D<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>   <span class="token comment">/* 鼠标移动到链接上 */</span>
<span class="token selector">选择器 :active</span> <span class="token punctuation">&#123;</span><span class="token property">background-color</span><span class="token punctuation">:</span>#FF704D<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>  <span class="token comment">/* 鼠标点击时 */</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="8-4-创建高级按钮"><a href="#8-4-创建高级按钮" class="headerlink" title="8.4  创建高级按钮"></a>8.4  创建高级按钮</h3><blockquote>
<p>利用所学知识，联合使用创建高级按钮 </p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
    <span class="token comment">/*设置常显示样式*/</span>
<span class="token selector">a:link,a:visited</span>					
<span class="token punctuation">&#123;</span>
	<span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>			<span class="token comment">/*规定应该生成框的类型*/</span>
	<span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span>			<span class="token comment">/*设置字体宽度*/</span>
	<span class="token property">color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span>			<span class="token comment">/*设置字体颜色*/</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span>#98bf21<span class="token punctuation">;</span>			<span class="token comment">/*设置背景颜色*/</span>
	<span class="token property">width</span><span class="token punctuation">:</span>120px<span class="token punctuation">;</span>			<span class="token comment">/*设置宽度*/</span>
	<span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>			<span class="token comment">/*设置文字对齐方式*/</span>
	<span class="token property">padding</span><span class="token punctuation">:</span>4px<span class="token punctuation">;</span>			<span class="token comment">/*设置所有内边距属性*/</span>
	<span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>			<span class="token comment">/*去除装饰(下划线)*/</span>
<span class="token punctuation">&#125;</span>
    <span class="token comment">/*设置因动作改变的样式*/</span>
<span class="token selector">a:hover,a:active</span>					
<span class="token punctuation">&#123;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span>#7A991A<span class="token punctuation">;</span>			<span class="token comment">/*设置字体背景色*/</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>







<h2 id="9-列表"><a href="#9-列表" class="headerlink" title="9  列表"></a>9  列表</h2><blockquote>
<ul>
<li>设置不同的列表项标记为有序列表</li>
<li>设置不同的列表项标记为无序列表</li>
<li>设置列表项标记为图像</li>
</ul>
</blockquote>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">list-style</td>
<td align="left">简写属性。用于把所有用于列表的属性设置于一个声明中</td>
</tr>
<tr>
<td align="left">list-style-image</td>
<td align="left">将图像设置为列表项标志。</td>
</tr>
<tr>
<td align="left">list-style-position</td>
<td align="left">设置列表中列表项标志的位置。</td>
</tr>
<tr>
<td align="left">list-style-type</td>
<td align="left">设置列表项标志的类型。</td>
</tr>
</tbody></table>
<h3 id="9-1-设置有序，无序列表图标"><a href="#9-1-设置有序，无序列表图标" class="headerlink" title="9.1  设置有序，无序列表图标"></a>9.1  设置有序，无序列表图标</h3><blockquote>
<p>list-style-type属性指定列表项标记的类型是</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">ul.a</span> <span class="token punctuation">&#123;</span><span class="token property">list-style-type</span><span class="token punctuation">:</span>circle<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>       <span class="token comment">/*设置无序列表标志为空心圆*/</span>
<span class="token selector">ul.b</span> <span class="token punctuation">&#123;</span><span class="token property">list-style-type</span><span class="token punctuation">:</span>square<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>       <span class="token comment">/*设置无序列表标志为实心方块*/</span>
    
<span class="token selector">ol.c</span> <span class="token punctuation">&#123;</span><span class="token property">list-style-type</span><span class="token punctuation">:</span>upper-roman<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>       <span class="token comment">/*设置有序列表标志为罗马数字*/</span>
<span class="token selector">ol.d</span> <span class="token punctuation">&#123;</span><span class="token property">list-style-type</span><span class="token punctuation">:</span>lower-alpha<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>       <span class="token comment">/*设置有序列表为小写字母*/</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="9-2-设置图片为标志类型"><a href="#9-2-设置图片为标志类型" class="headerlink" title="9.2 设置图片为标志类型"></a>9.2 设置图片为标志类型</h3><blockquote>
<p>列表项标记的图像，使用列表样式图像</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">ul</span> 
<span class="token punctuation">&#123;</span>
	<span class="token property">list-style-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'图片路径'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="9-3-简写属性"><a href="#9-3-简写属性" class="headerlink" title="9.3  简写属性"></a>9.3  简写属性</h3><blockquote>
<p>在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。</p>
<ul>
<li>list-style-type</li>
<li>list-style-position (设置标记位置inside,outside)</li>
<li>list-style-image</li>
</ul>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">ul</span> 
<span class="token punctuation">&#123;</span>			<span class="token comment">/*标记类型   位置      图片路径*/</span>
	<span class="token property">list-style</span><span class="token punctuation">:</span>square inside <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"sqpurple.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<hr>
<h2 id="10-表格"><a href="#10-表格" class="headerlink" title="10  表格"></a>10  表格</h2><blockquote>
</blockquote>
<h3 id="10-1-表格边框"><a href="#10-1-表格边框" class="headerlink" title="10.1  表格边框"></a>10.1  表格边框</h3><blockquote>
<p>设置表格中的边框</p>
<p>表格有双边框。这是因为th/ td元素有独立的边界,与table的边框相独立。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
    <span class="token comment">/*设置表格外框*/</span>
<span class="token selector">table</span> <span class="token punctuation">&#123;</span>
	<span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> <span class="token comment">/*简写样式 border 宽度 样式 颜色*/</span>
<span class="token punctuation">&#125;</span>
    <span class="token comment">/*设置表头的边框*/</span>
<span class="token selector">th</span><span class="token punctuation">&#123;</span>
	<span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
    <span class="token comment">/*设置单个表格的边框*/</span>
<span class="token selector">td</span> <span class="token punctuation">&#123;</span>
	<span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="10-2-折叠边框"><a href="#10-2-折叠边框" class="headerlink" title="10.2  折叠边框"></a>10.2  折叠边框</h3><blockquote>
<p>border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开</p>
<p>使th/ td元素和table的边框折叠，设置为单一的边框。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">table</span> <span class="token punctuation">&#123;</span>
    <span class="token property">border-collapse</span><span class="token punctuation">:</span> collapse<span class="token punctuation">;</span>		<span class="token comment">/*设置表格的边框是否被折叠成一个单一的边框或隔开*/</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="10-3-设置边框的宽高"><a href="#10-3-设置边框的宽高" class="headerlink" title="10.3  设置边框的宽高"></a>10.3  设置边框的宽高</h3><blockquote>
<p>Width和height属性定义表格的宽度和高度。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">e</span>
<span class="token punctuation">&#123;</span>
	<span class="token property">width</span><span class="token punctuation">:</span>宽度px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>高度px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="10-4-设置文字对齐"><a href="#10-4-设置文字对齐" class="headerlink" title="10.4  设置文字对齐"></a>10.4  设置文字对齐</h3><blockquote>
<p>表格中的文本对齐和垂直对齐属性。</p>
<p>text-align属性设置水平对齐方式，向左，右，或中心：</p>
<p>vertical-align属性设置垂直对齐属性</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">table</span>
<span class="token punctuation">&#123;</span>
	<span class="token property">text-align</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span>		<span class="token comment">/*设置表格水平右对齐*/</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">td</span>
<span class="token punctuation">&#123;</span>	
	<span class="token property">vertical-align</span><span class="token punctuation">:</span>bottom<span class="token punctuation">;</span>   <span class="token comment">/*设置垂直对齐(bottom:把元素的顶端与行中最低的元素的顶端对齐。)*/</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="10-5-表格填充"><a href="#10-5-表格填充" class="headerlink" title="10.5  表格填充"></a>10.5  表格填充</h3><blockquote>
<p>表的内容中控制数据和边框之间的距离，应使用<code>td和th</code>元素的填充属性padding</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">td</span>
<span class="token punctuation">&#123;</span>
	<span class="token property">padding</span><span class="token punctuation">:</span>填充距离px<span class="token punctuation">;</span>   <span class="token comment">/*设置数据和边框之间的距离*/</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>







<h3 id="10-6-表格颜色"><a href="#10-6-表格颜色" class="headerlink" title="10.6  表格颜色"></a>10.6  表格颜色</h3><blockquote>
<p>设置边框颜色</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">table, td, th</span>  
<span class="token punctuation">&#123;</span>
	<span class="token property">border-color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>     <span class="token comment">/*设置列表中所有边框颜色为红色*/</span>
<span class="token punctuation">&#125;</span>

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h2 id="11-盒子模型"><a href="#11-盒子模型" class="headerlink" title="11  盒子模型"></a>11  盒子模型</h2><blockquote>
<p>所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。</p>
<p>页面布局三大核心：  盒子模型，浮动和定位。</p>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<p>盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。</p>
</blockquote>
<p><img src="https://www.runoob.com/images/box-model.gif"></p>
<ul>
<li><strong>Margin(外边距)</strong> - 清除边框外的区域，外边距是透明的。控制盒子之间的距离</li>
<li><strong>Border(边框)</strong> - 围绕在内边距和内容外的边框。</li>
<li><strong>Padding(内边距)</strong> - 清除内容周围的区域，内边距是透明的。</li>
<li><strong>Content(内容)</strong> - 盒子的内容，显示文本和图像。</li>
<li>每个部分都由四个方向组成： top,bottom,left,right </li>
</ul>
<h3 id="11-1-元素的宽度和高度"><a href="#11-1-元素的宽度和高度" class="headerlink" title="11.1  元素的宽度和高度"></a>11.1  元素的宽度和高度</h3><blockquote>
<p>指定一个 CSS 元素的宽度和高度属性时，你只是设置<code>内容区域</code>的宽度和高度。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">div</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 220px<span class="token punctuation">;</span>     <span class="token comment">/*设置内容高度*/</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>     <span class="token comment">/*设置内边框*/</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 5px solid gray<span class="token punctuation">;</span>		<span class="token comment">/*设置边框*/</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> 			<span class="token comment">/*设置内边框*/</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>最终元素的总宽度计算公式是这样的：</p>
<p>总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距</p>
<p>元素的总高度最终计算公式是这样的：</p>
<p>总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距</p>
<hr>
<h2 id="12-边框-Border"><a href="#12-边框-Border" class="headerlink" title="12  边框(Border)"></a>12  边框(Border)</h2><blockquote>
<p>CSS边框属性允许你指定一个元素边框的样式和颜色。</p>
<p>边框会影响盒子的大小。，盒子一共的宽度等于： 盒子的元原始宽度 + 左右边框宽度</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">border</td>
<td align="left">简写属性，用于把针对四个边的属性设置在一个声明。没有顺序</td>
</tr>
<tr>
<td align="left">broder-collapse</td>
<td align="left">合并相邻的边框</td>
</tr>
<tr>
<td align="left">border-style</td>
<td align="left">用于设置元素所有边框的样式，或者单独地为各边设置边框样式。</td>
</tr>
<tr>
<td align="left">border-width</td>
<td align="left">简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。</td>
</tr>
<tr>
<td align="left">border-color</td>
<td align="left">简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。</td>
</tr>
<tr>
<td align="left">border-bottom</td>
<td align="left">简写属性，用于把下边框的所有属性设置到一个声明中。</td>
</tr>
<tr>
<td align="left">border-bottom-color</td>
<td align="left">设置元素的下边框的颜色。</td>
</tr>
<tr>
<td align="left">border-bottom-style</td>
<td align="left">设置元素的下边框的样式。</td>
</tr>
<tr>
<td align="left">border-bottom-width</td>
<td align="left">设置元素的下边框的宽度。</td>
</tr>
<tr>
<td align="left">border-left</td>
<td align="left">简写属性，用于把左边框的所有属性设置到一个声明中。</td>
</tr>
<tr>
<td align="left">border-left-color</td>
<td align="left">设置元素的左边框的颜色。</td>
</tr>
<tr>
<td align="left">border-left-style</td>
<td align="left">设置元素的左边框的样式。</td>
</tr>
<tr>
<td align="left">border-left-width</td>
<td align="left">设置元素的左边框的宽度。</td>
</tr>
<tr>
<td align="left">border-right</td>
<td align="left">简写属性，用于把右边框的所有属性设置到一个声明中。</td>
</tr>
<tr>
<td align="left">border-right-color</td>
<td align="left">设置元素的右边框的颜色。</td>
</tr>
<tr>
<td align="left">border-right-style</td>
<td align="left">设置元素的右边框的样式。</td>
</tr>
<tr>
<td align="left">border-right-width</td>
<td align="left">设置元素的右边框的宽度。</td>
</tr>
<tr>
<td align="left">border-top</td>
<td align="left">简写属性，用于把上边框的所有属性设置到一个声明中。</td>
</tr>
<tr>
<td align="left">border-top-color</td>
<td align="left">设置元素的上边框的颜色。</td>
</tr>
<tr>
<td align="left">border-top-style</td>
<td align="left">设置元素的上边框的样式。</td>
</tr>
<tr>
<td align="left">border-top-width</td>
<td align="left">设置元素的上边框的宽度。</td>
</tr>
</tbody></table>
<h3 id="12-1-border-style边框样式："><a href="#12-1-border-style边框样式：" class="headerlink" title="12.1  border-style边框样式："></a>12.1  border-style边框样式：</h3><blockquote>
<p>设置边框的样式</p>
</blockquote>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>none</td>
<td>默认无边框</td>
<td></td>
</tr>
<tr>
<td>dotted</td>
<td>定义一个点线边框</td>
<td></td>
</tr>
<tr>
<td>dashed</td>
<td>定义一个虚线边框</td>
<td></td>
</tr>
<tr>
<td>solid</td>
<td>定义实线边框</td>
<td></td>
</tr>
<tr>
<td>double</td>
<td>定义两个边框。</td>
<td></td>
</tr>
<tr>
<td>groove</td>
<td>定义3D沟槽边框。效果取决于边框的颜色值</td>
<td></td>
</tr>
<tr>
<td>ridge</td>
<td>定义3D脊边框。效果取决于边框的颜色值</td>
<td></td>
</tr>
<tr>
<td>inset</td>
<td>定义一个3D的嵌入边框。效果取决于边框的颜色值</td>
<td></td>
</tr>
<tr>
<td>outset</td>
<td>定义一个3D突出边框。 效果取决于边框的颜色值</td>
<td></td>
</tr>
</tbody></table>
<h3 id="12-2-边框宽度"><a href="#12-2-边框宽度" class="headerlink" title="12.2  边框宽度"></a>12.2  边框宽度</h3><blockquote>
<p>您可以通过 border-width 属性为边框指定宽度。</p>
<p>为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span><span class="token punctuation">&#123;</span>
	<span class="token property">border-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span>
	<span class="token property">border-width</span><span class="token punctuation">:</span>5px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">选择器</span><span class="token punctuation">&#123;</span>
	<span class="token property">border-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span>
	<span class="token property">border-width</span><span class="token punctuation">:</span>medium<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="12-3-边框颜色"><a href="#12-3-边框颜色" class="headerlink" title="12.3  边框颜色"></a>12.3  边框颜色</h3><blockquote>
<p>border-color属性用于设置边框的颜色。可以设置的颜色：</p>
<ul>
<li>name - 指定颜色的名称，如 “red”</li>
<li>RGB - 指定 RGB 值, 如 “rgb(255,0,0)”</li>
<li>Hex - 指定16进制值, 如 “#ff0000”</li>
</ul>
</blockquote>
<h3 id="12-4-单独设置各边。"><a href="#12-4-单独设置各边。" class="headerlink" title="12.4  单独设置各边。"></a>12.4  单独设置各边。</h3><blockquote>
<p>在CSS中，可以指定不同的侧面不同的边框：</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">选择器</span><span class="token punctuation">&#123;</span>
	<span class="token property">border-top-style</span><span class="token punctuation">:</span>dotted<span class="token punctuation">;</span>  <span class="token comment">/*设置上边框样式*/</span>
	<span class="token property">border-right-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span>  <span class="token comment">/*设置有边框样式*/</span>
	<span class="token property">border-bottom-style</span><span class="token punctuation">:</span>dotted<span class="token punctuation">;</span>  <span class="token comment">/*设置下边框样式*/</span>
	<span class="token property">border-left-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span>  <span class="token comment">/*设置左边框样式*/</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<blockquote>
<p>border-style属性可以有1-4个值：</p>
<ul>
<li>border-style:样式1 样式2 样式3 样式4;<ul>
<li>上边框是 样式1</li>
<li>右边框是 样式2</li>
<li>底边框是 样式3</li>
<li>左边框是 样式4</li>
</ul>
</li>
<li>border-style:样式1 样式2 样式3;<ul>
<li>上边框是 样式1</li>
<li>左、右边框是 样式2</li>
<li>底边框是 样式3</li>
</ul>
</li>
<li>border-style:样式1 样式2;<ul>
<li>上、底边框是 样式1</li>
<li>右、左边框是 样式2</li>
</ul>
</li>
<li>border-style:样式1;<ul>
<li>四面边框是 样式1</li>
</ul>
</li>
</ul>
<p>上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。</p>
</blockquote>
<h3 id="12-5-合并相邻的边框"><a href="#12-5-合并相邻的边框" class="headerlink" title="12.5 合并相邻的边框"></a>12.5 合并相邻的边框</h3><blockquote>
<p>可以使用border-collapse：collapse;来合并相邻的边框。使相邻的边框不会并列二十重叠。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">th,td &#123;
	border: 1px solid pink;
	border-collapse：collapse;
	font-size: 14px;
	text-align: center;
	
&#125;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="12-5-border-radius-圆角边框"><a href="#12-5-border-radius-圆角边框" class="headerlink" title="12.5 border-radius(圆角边框)"></a>12.5 border-radius(圆角边框)</h3><blockquote>
<p>border-radius: length;属性可以设置边框是圆角。</p>
</blockquote>
<ul>
<li>参数值可以是数值或者是百分比的形式。</li>
<li>如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。</li>
<li>如果是个矩形，设置为高度的一半可以常用的圆角矩形盒子。</li>
<li>该属性是一个简写属性，可以是四个值，分别代表：左上角，右上角，右下角，左下角。</li>
<li>也可以是两个值，分别是对角线的两个值。</li>
</ul>
<h3 id="12-6-三角形"><a href="#12-6-三角形" class="headerlink" title="12.6 三角形"></a>12.6 三角形</h3><blockquote>
<p>可以通过将盒子的高度和宽度调整为0，然后调整四个边框的颜色和大小，调整出需要的形状和颜色。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">.borderN &#123;
	height:0;   //设置高度为0
	width:0;	//设置宽度为0
	border-top: transparent solid 100px;
    border-left: springgreen solid 20px;
    border-right: rgb(0, 255, 76) solid 0px;
    border-bottom: rgb(255, 0, 64) solid 0px;
&#125;

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>borderN<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>







<h2 id="13-轮廓（outline）"><a href="#13-轮廓（outline）" class="headerlink" title="13 轮廓（outline）"></a>13 轮廓（outline）</h2><blockquote>
<p>轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。</p>
<p>轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。</p>
<p>也可以通过==outline:none;来设置表单文本框选中时没有蓝色轮廓。==</p>
</blockquote>
<p><img src="https://www.runoob.com/images/box_outline.gif"></p>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">说明</th>
<th align="left">值</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left">outline</td>
<td align="left">在一个声明中设置所有的轮廓属性</td>
<td align="left">*outline-color outline-style outline-width *inherit</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">outline-color</td>
<td align="left">设置轮廓的颜色</td>
<td align="left">*color-name hex-number rgb-number *invert inherit</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">outline-style</td>
<td align="left">设置轮廓的样式</td>
<td align="left">none dotted dashed solid double groove ridge inset outset inherit</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">outline-width</td>
<td align="left">设置轮廓的宽度</td>
<td align="left">thin medium thick *length *inherit</td>
<td align="left"></td>
</tr>
</tbody></table>
<h3 id="13-1-轮廓颜色"><a href="#13-1-轮廓颜色" class="headerlink" title="13.1 轮廓颜色"></a>13.1 轮廓颜色</h3><blockquote>
<p>使用outline-color修改轮廓的颜色</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span><span class="token punctuation">&#123;</span>
	<span class="token property">outline-style</span><span class="token punctuation">:</span>dotted<span class="token punctuation">;</span>   <span class="token comment">/*修改轮廓的样式*/</span>
	<span class="token property">outline-color</span><span class="token punctuation">:</span>#00ff00<span class="token punctuation">;</span>	<span class="token comment">/*修改轮廓的颜色*/</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="13-2-轮廓的样式"><a href="#13-2-轮廓的样式" class="headerlink" title="13.2  轮廓的样式"></a>13.2  轮廓的样式</h3><blockquote>
<p>通过outline-style来指定特定的轮廓样式。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span><span class="token punctuation">&#123;</span>
	<span class="token property">outline-style</span><span class="token punctuation">:</span>dotted<span class="token punctuation">;</span>   <span class="token comment">/*修改轮廓的样式*/</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="13-3-轮廓的宽度"><a href="#13-3-轮廓的宽度" class="headerlink" title="13.3  轮廓的宽度"></a>13.3  轮廓的宽度</h3><blockquote>
<p>通过outline-width来修改轮廓的宽度。</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">值</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">thin</td>
<td align="left">规定细轮廓。</td>
</tr>
<tr>
<td align="left">medium</td>
<td align="left">默认。规定中等的轮廓。</td>
</tr>
<tr>
<td align="left">thick</td>
<td align="left">规定粗的轮廓。</td>
</tr>
<tr>
<td align="left">宽度px</td>
<td align="left">规定轮廓粗细的值。</td>
</tr>
<tr>
<td align="left">inherit</td>
<td align="left">规定应该从父元素继承轮廓宽度的设置。</td>
</tr>
</tbody></table>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span><span class="token punctuation">&#123;</span>
	
	<span class="token property">outline-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span>
	<span class="token property">outline-width</span><span class="token punctuation">:</span>thin<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<hr>
<h2 id="14-外边距-margin"><a href="#14-外边距-margin" class="headerlink" title="14 外边距(margin)"></a>14 外边距(margin)</h2><blockquote>
<p>margin 清除周围的（外边框）元素区域。margin <code>没有背景颜色，是完全透明的。</code></p>
<p>margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。</p>
<p>许多标签元素自带不同的外边距，且在不同浏览器中外边距还不一样。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">*</span> <span class="token punctuation">&#123;</span>       //清除外边距和内边距
    <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<p>设置块盒子水平居中</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">&#123;</span> 
	<span class="token property">width</span><span class="token punctuation">:</span> 900px<span class="token punctuation">;</span>      //设置宽度
  	<span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>		//设置左右外边距auto
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<p>设置行内块元素和行内元素居中：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">&#123;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>    //为父元素设置text-align
<span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>





<p><img src="https://www.runoob.com/wp-content/uploads/2013/08/VlwVi.png"></p>
<table>
<thead>
<tr>
<th align="left">值</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">auto</td>
<td align="left">自动，设置浏览器边距。 这样做的结果会依赖于浏览器</td>
</tr>
<tr>
<td align="left">宽度px</td>
<td align="left">定义一个固定的margin（使用像素，pt，em等）</td>
</tr>
<tr>
<td align="left">占比*%*</td>
<td align="left">定义一个使用百分比的边距</td>
</tr>
</tbody></table>
<h3 id="14-1-设置单独方向的外边距"><a href="#14-1-设置单独方向的外边距" class="headerlink" title="14.1 设置单独方向的外边距"></a>14.1 设置单独方向的外边距</h3><blockquote>
<p>使用 margin-方向 来设置单独方向的外边距</p>
<p>行内元素尽量只设置左右的内外边距。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style></span>
<span class="token punctuation">&#123;</span>
    <span class="token property">margin-top</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>   <span class="token comment">/*设置顶部外边距*/</span>
    <span class="token property">margin-bottom</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>   <span class="token comment">/*设置底部外边距*/</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span>   <span class="token comment">/*设置右部外边距*/</span>
    <span class="token property">margin-left</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span>   <span class="token comment">/*设置左部外边距*/</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="14-2-简写margin设置"><a href="#14-2-简写margin设置" class="headerlink" title="14.2  简写margin设置"></a>14.2  简写margin设置</h3><blockquote>
<p><strong>margin</strong>属性可以有1-4个值：</p>
<ul>
<li><strong>margin</strong>:样式1 样式2 样式3 样式4;</li>
<li>上外边距是 样式1</li>
<li>右外边距是 样式2</li>
<li>底外边距是 样式3</li>
<li>左外边距是 样式4</li>
<li><strong>margin</strong>:样式1 样式2 样式3;</li>
<li>上外边距是 样式1</li>
<li>左、右外边距是 样式2</li>
<li>底外边距是 样式3</li>
<li><strong>margin</strong>:样式1 样式2;</li>
<li>上、底外边距是 样式1</li>
<li>右、左外边距是 样式2</li>
<li><strong>margin</strong>:样式1;</li>
<li>四面外边距是 样式1</li>
</ul>
</blockquote>
<h3 id="14-3-外边框塌陷问题"><a href="#14-3-外边框塌陷问题" class="headerlink" title="14.3 外边框塌陷问题"></a>14.3 外边框塌陷问题</h3><blockquote>
<p>对于两个嵌套关系(父子关系)的块元素，父元素没有上边距的同时子元素也有上边距，此时父元素会塌陷较大的外边距值。</p>
</blockquote>
<p>解决方案</p>
<ol>
<li>可以为父元素定义上边框。</li>
<li>可以为父元素定义上内边距。</li>
<li>可以为父元素添加overflow:hidden。</li>
</ol>
<h3 id="14-4-margin的负值问题"><a href="#14-4-margin的负值问题" class="headerlink" title="14.4 margin的负值问题"></a>14.4 margin的负值问题</h3><blockquote>
<p>margin属性可以设置负值，负值可以调节左右元素边框的重叠问题。</p>
</blockquote>
<h3 id="14-4-相邻块元素垂直外边距的合并"><a href="#14-4-相邻块元素垂直外边距的合并" class="headerlink" title="14.4 相邻块元素垂直外边距的合并"></a>14.4 相邻块元素垂直外边距的合并</h3><blockquote>
<p>当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。去两个值中的较大者这种现象被称为==相邻块元素垂直外边距的合并==。</p>
</blockquote>
<h2 id="15-填充-内边距-padding"><a href="#15-填充-内边距-padding" class="headerlink" title="15  填充,内边距(padding)"></a>15  填充,内边距(padding)</h2><blockquote>
<p>当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。</p>
<p>pading也会影响盒子的大小。</p>
<p>单独使用 padding 属性可以改变上下左右的填充。</p>
<p>使用padding会撑开盒子，可以不设定盒子的宽和高，利用padding属性进行撑开操作，以达到每个盒子字数不同，内边距相同。</p>
<p>如果盒子本身并没有指定width和height属性，则padding不会撑开盒子大小。</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">值</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><em>宽度px</em></td>
<td align="left">定义一个固定的填充(像素, pt, em,等)</td>
</tr>
<tr>
<td align="left">占比*%*</td>
<td align="left">使用百分比值定义一个填充</td>
</tr>
</tbody></table>
<h3 id="15-1-改变单独方向的填充"><a href="#15-1-改变单独方向的填充" class="headerlink" title="15.1  改变单独方向的填充"></a>15.1  改变单独方向的填充</h3><blockquote>
<p>使用padding-方向 来修改单独方向的填充。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">选择器</span><span class="token punctuation">&#123;</span>
	<span class="token property">padding-top</span><span class="token punctuation">:</span>宽度px<span class="token punctuation">;</span>		<span class="token comment">/*改变顶部填充*/</span>
	<span class="token property">padding-bottom</span><span class="token punctuation">:</span>宽度px<span class="token punctuation">;</span>		<span class="token comment">/*改变底部填充*/</span>
	<span class="token property">padding-right</span><span class="token punctuation">:</span>宽度px<span class="token punctuation">;</span>		<span class="token comment">/*改变右部填充*/</span>
	<span class="token property">padding-left</span><span class="token punctuation">:</span>宽度px<span class="token punctuation">;</span>		<span class="token comment">/*改变左部填充*/</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="15-2-简写padding设置"><a href="#15-2-简写padding设置" class="headerlink" title="15.2  简写padding设置"></a>15.2  简写padding设置</h3><blockquote>
<p> <strong>padding:25px 50px 75px 100px;</strong>  上 右 下 左</p>
<p> **padding:25px 50px 75px; **   上  左右   下</p>
<p> <strong>padding:25px 50px;</strong>     上下   左右</p>
<p> <strong>padding:25px;</strong>            上下左右</p>
<p> 以上设置规律同 margin , border。</p>
</blockquote>
<h2 id="16-分组-和-嵌套-选择器"><a href="#16-分组-和-嵌套-选择器" class="headerlink" title="16  分组 和 嵌套 选择器"></a>16  分组 和 嵌套 选择器</h2><blockquote>
<p>在样式表中有很多具有相同样式的元素。</p>
<p>分组选择器,每个选择器用逗号分隔。</p>
<p>嵌套选择器可以使选择类别更具体，分化更细。</p>
</blockquote>
<h3 id="16-1-分组选择器"><a href="#16-1-分组选择器" class="headerlink" title="16.1  分组选择器"></a>16.1  分组选择器</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">选择器1,选择器2,选择器3</span><span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>





<h3 id="16-2-嵌套选择器"><a href="#16-2-嵌套选择器" class="headerlink" title="16.2  嵌套选择器"></a>16.2  嵌套选择器</h3><blockquote>
<p>它可能适用于选择器内部的选择器的样式。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">标签选择器.类选择器</span><span class="token punctuation">&#123;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span>underline<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">标签选择器#id选择器</span><span class="token punctuation">&#123;</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span>underline<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h2 id="17-尺寸"><a href="#17-尺寸" class="headerlink" title="17 尺寸"></a>17 尺寸</h2><blockquote>
<p>尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。</p>
<p>尺寸可以使用像素，百分比来设定尺寸。</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">height</td>
<td align="left">设置元素的高度。</td>
</tr>
<tr>
<td align="left">line-height</td>
<td align="left">设置行高。</td>
</tr>
<tr>
<td align="left">max-height</td>
<td align="left">设置元素的最大高度。</td>
</tr>
<tr>
<td align="left">max-width</td>
<td align="left">设置元素的最大宽度。</td>
</tr>
<tr>
<td align="left">min-height</td>
<td align="left">设置元素的最小高度。</td>
</tr>
<tr>
<td align="left">min-width</td>
<td align="left">设置元素的最小宽度。</td>
</tr>
<tr>
<td align="left">width</td>
<td align="left">设置元素的宽度。</td>
</tr>
</tbody></table>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span><span class="token punctuation">&#123;</span>
	<span class="token property">min-width</span><span class="token punctuation">:</span>150px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<hr>
<h2 id="18-Display-显示"><a href="#18-Display-显示" class="headerlink" title="18  Display(显示)"></a>18  Display(显示)</h2><blockquote>
<p>display属性设置一个元素应如何显示.隐藏后不占用原来的空间。（none 为隐藏，block为显示）</p>
<p>visibility属性指定一个元素应可见还是隐藏。即使隐藏还会占用空间。(hidden为隐藏，visible为显示)</p>
<p>overflow 溢出显示隐藏 但是只是对于溢出的元素进行处理。</p>
</blockquote>
<h3 id="18-1-隐藏元素"><a href="#18-1-隐藏元素" class="headerlink" title="18.1  隐藏元素"></a>18.1  隐藏元素</h3><blockquote>
<p>隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。</p>
</blockquote>
<blockquote>
<p>visibility:hidden可以隐藏某个元素，<code>但隐藏的元素仍需占用与未隐藏之前一样的空间</code>。也就是说，该元素虽然被隐藏了，但仍然会占有原来的位置。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span><span class="token punctuation">&#123;</span><span class="token property">visibility</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span><span class="token punctuation">&#125;</span> <span class="token comment">/*设置此元素为隐藏元素*/</span>

<span class="token selector">选择器</span><span class="token punctuation">&#123;</span><span class="token property">visibility</span><span class="token punctuation">:</span>visible<span class="token punctuation">;</span><span class="token punctuation">&#125;</span> <span class="token comment">/*设置此元素为显示元素*/</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<blockquote>
<p>display:none可以隐藏某个元素，且<code>隐藏的元素不会占用任何空间。</code>也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。下面的元素会上移。</p>
<p>display:block;  转换为块级元素，同时还有显示元素的意思。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span><span class="token punctuation">&#123;</span><span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">&#125;</span><span class="token comment">/*设置此元素为隐藏元素*/</span>

<span class="token selector">选择器</span><span class="token punctuation">&#123;</span><span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span><span class="token punctuation">&#125;</span><span class="token comment">/*设置此元素为显示元素*/</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="18-2-Display-块和内联元素"><a href="#18-2-Display-块和内联元素" class="headerlink" title="18.2 Display - 块和内联元素"></a>18.2 Display - 块和内联元素</h3><p>块元素特点:</p>
<ol>
<li>自己独占一行。</li>
<li>高度，宽度，外边距都可以控制。</li>
<li>宽度默认是容器(父类宽度)100%。</li>
<li>是一个容器及盒子，里面可以放行内或者块级元素。</li>
</ol>
<p>注意：</p>
<ul>
<li>文字类的元素不能使用块级元素。</li>
<li>&lt;p&gt;标签主要用于存放文字，不允许存放&lt;div&gt;标签，会出错误。</li>
</ul>
<p>块元素的例子：</p>
<ul>
<li>&lt;h1&gt;</li>
<li>&lt;p&gt;</li>
<li>&lt;div&gt;</li>
</ul>
<p>行内元素特点：</p>
<ol>
<li>相邻行内元素在一行上，一行可以显示多个。</li>
<li>高，宽直接设置是无效的。</li>
<li>默认宽度就是它本身内容的宽度。</li>
<li>行内元素只能容纳文本或者其他行内元素。</li>
</ol>
<p>注意：</p>
<ul>
<li>连接中不能再放链接。</li>
<li>特殊情况链接&lt;a&gt;里面可以放块级元素，但是转换一下块级模式最安全。</li>
</ul>
<p>内联元素的例子：</p>
<ul>
<li>&lt;span&gt;</li>
<li>&lt;a&gt;</li>
</ul>
<p>行内块元素：</p>
<p>&lt;img/&gt; &lt;input/&gt; &lt;td&gt;</p>
<ol>
<li>和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙，一行可以显示多个(行内元素特点)。</li>
<li>默认宽度就是它本身内容的宽度(行内元素特点)。</li>
<li>高度，行高，外边距以及内边距都可以控制(块级元素特点)。</li>
</ol>
<table>
<thead>
<tr>
<th>元素模式</th>
<th>元素排列</th>
<th>设置样式</th>
<th>默认宽度</th>
<th>包含</th>
</tr>
</thead>
<tbody><tr>
<td>块级元素</td>
<td>一行只能放一个块级元素</td>
<td>可以设置宽度高度</td>
<td>容器的100%</td>
<td>容器可以包含任何标签</td>
</tr>
<tr>
<td>行内元素</td>
<td>一行可以放多个行内元素</td>
<td>不可以直接设置宽度高度</td>
<td>它本身内容的宽度</td>
<td>容纳文本或者其他行内元素</td>
</tr>
<tr>
<td>行内块元素</td>
<td>一行放多个行内块级元素</td>
<td>可以设置宽度和高度</td>
<td>它本身内容的宽度</td>
<td></td>
</tr>
</tbody></table>
<h3 id="18-3-改变元素的块和内联"><a href="#18-3-改变元素的块和内联" class="headerlink" title="18.3  改变元素的块和内联"></a>18.3  改变元素的块和内联</h3><blockquote>
<p>可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。</p>
</blockquote>
<p>把列表项改为内联元素：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
li</span> <span class="token punctuation">&#123;</span><span class="token property">display</span><span class="token punctuation">:</span>inline<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p>把span改为块元素</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
span</span> <span class="token punctuation">&#123;</span><span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>





<h2 id="19-定位-position"><a href="#19-定位-position" class="headerlink" title="19 定位(position)"></a>19 定位(position)</h2><blockquote>
<p>position 属性指定了元素的定位类型。   ==定位 = 定位模式 + 边偏移==</p>
<p>定位模式决定一个元素在文档中的定位方式。边偏移决定了该元素的最终位置。</p>
<p>position 属性的五个值：</p>
<ul>
<li>static(静态)</li>
<li>relative(相对)</li>
<li>fixed(固定)</li>
<li>absolute(父)</li>
<li>sticky(粘性)</li>
</ul>
</blockquote>
<blockquote>
<p>元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。</p>
</blockquote>
<h3 id="19-1-static-定位"><a href="#19-1-static-定位" class="headerlink" title="19.1  static 定位"></a>19.1  static 定位</h3><blockquote>
<p>HTML 元素的默认值，即没有定位，遵循正常的文档流对象。(标准流)</p>
<p>静态定位的元素并没有偏移不会受到 top, bottom, left, right影响。</p>
</blockquote>
<h3 id="19-2-fixed-固定定位"><a href="#19-2-fixed-固定定位" class="headerlink" title="19.2  fixed 固定定位"></a>19.2  fixed 固定定位</h3><blockquote>
<p>元素的位置相对于浏览器窗口是固定位置。即使浏览器滚动，固定元素不会移动</p>
<p>即使窗口是滚动的它也不会移动(狗皮膏药式)：</p>
<p>不会占用原来位置，会悬浮在上。(脱离标准流)</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span><span class="token punctuation">&#123;</span>
	<span class="token property">position</span><span class="token punctuation">:</span>fixed<span class="token punctuation">;</span>  <span class="token comment">/*设置position的属性将对应标签的内容固定在窗口前*/</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="19-3-relative-相对定位"><a href="#19-3-relative-相对定位" class="headerlink" title="19.3 relative  相对定位"></a>19.3 relative  相对定位</h3><blockquote>
<p>相对定位元素的定位是相对其正常位置(标准流)。</p>
<p>虽然设置相对定位的盒子移动，但是其原来位置还会被保留</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span><span class="token punctuation">&#123;</span>
	<span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span> <span class="token comment">/*相对于正确位置进行移动*/</span>
	<span class="token property">left</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="19-4-absolute-绝对定位"><a href="#19-4-absolute-绝对定位" class="headerlink" title="19.4  absolute 绝对定位"></a>19.4  absolute 绝对定位</h3><blockquote>
<ul>
<li><p>如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。</p>
</li>
<li><p>如果祖先元素有定位(相对，绝对，固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。</p>
</li>
<li><p>绝对定位不再占有原来的位置，脱离标准流。</p>
</li>
<li><p>==浮动元素之前的元素将不会受到影响==浮动盒子会压住之后的兄弟盒子，但是却不会压住盒子的文字(图片)。</p>
<p>==绝对定位会完全压住下面标准流的内容。==</p>
</li>
<li><p>元素使用绝对定位后 margin:auto 不会使元素居中</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token property">postion</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span>50%<span class="token punctuation">;</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></li>
</ul>
<p>绝对定位脱离标准流，不在占用原来的位置，后面的元素会补上去。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span><span class="token punctuation">&#123;</span>
	<span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span>
	<span class="token property">left</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>    <span class="token comment">/*设置离父元素的位置*/</span>
	<span class="token property">top</span><span class="token punctuation">:</span>150px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="子绝父相（子盒子绝对定位，父盒子相对定位）"><a href="#子绝父相（子盒子绝对定位，父盒子相对定位）" class="headerlink" title="子绝父相（子盒子绝对定位，父盒子相对定位）"></a>子绝父相（子盒子绝对定位，父盒子相对定位）</h3><blockquote>
<p>子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响到其他兄弟盒子。</p>
<p>父盒子需要加定位限制子盒子再父盒子内显示。</p>
<p>父盒子布局时需要占有位置，因此父盒子只能使用相对定位。</p>
<p>总结：因为父盒子需要占有位置，因此使用相对定位，子盒子不需要占有位置，则使用绝对定位。</p>
</blockquote>
<h3 id="19-5-sticky-定位"><a href="#19-5-sticky-定位" class="headerlink" title="19.5  sticky  定位"></a>19.5  sticky  定位</h3><blockquote>
<p>sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。</p>
<p><strong>position: sticky;</strong> 基于用户的滚动位置来定位。</p>
<p>占有原来的位置</p>
<p>粘性定位的元素是依赖于用户的滚动，在 <strong>position:relative</strong> 与 <strong>position:fixed</strong> 定位之间切换。</p>
<p>它的行为就像 <strong>position:relative;</strong> 而当页面滚动超出目标区域时，它的表现就像 **position:fixed;**，它会固定在目标位置。</p>
<p>元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。</p>
<p>这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span><span class="token punctuation">&#123;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>			<span class="token comment">/*设置离顶部指定距离时黏贴*/</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="19-6-重叠元素-z-index"><a href="#19-6-重叠元素-z-index" class="headerlink" title="19.6 重叠元素 z-index"></a>19.6 重叠元素 z-index</h3><blockquote>
<p>元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素</p>
<p>只有定位才有z-index属性，标准流没有此属性。</p>
<p>z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）</p>
<p>一个元素可以有正数或负数的堆叠顺序：</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span><span class="token punctuation">&#123;</span>
	<span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span>
	<span class="token property">left</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span>
	<span class="token property">top</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span>
	<span class="token property">z-index</span><span class="token punctuation">:</span>-1<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<hr>
<h3 id="19-7-定位扩展"><a href="#19-7-定位扩展" class="headerlink" title="19.7 定位扩展"></a>19.7 定位扩展</h3><blockquote>
<p>绝对定位和固定定位也和浮动类似。</p>
<ol>
<li>行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度。</li>
<li>块级元素添加绝对或者固定定位，如果不给定宽度个高度，默认为内容大小。</li>
</ol>
</blockquote>
<p>浮动只会压住盒子，不会压住标准流盒子中的文字和图片。(浮动之所以不会压住文字，因为浮动产生的目的最初是伪类做文字环绕效果的，文字会围绕浮动元素。)</p>
<p>绝对定位(固定定位)会压住下面标准流的所有内容。</p>
<p>如果一个盒子既有left属性也有right属性，则默认会执行left属性 同理 top bottom 会执行top属性。</p>
<h3 id="19-8-小三角"><a href="#19-8-小三角" class="headerlink" title="19.8 小三角"></a>19.8 小三角</h3><blockquote>
<p>制作漫画语言框小三角的部分.</p>
<p>利用空盒子的四边其中的一边的边框来制作小三角。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token property">height</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>   <span class="token comment">/*设置空盒子*/</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> 10px solid transparent<span class="token punctuation">;</span>  <span class="token comment">/*设置盒子的边框宽度和透明色*/</span>
      <span class="token property">border-bottom-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>		<span class="token comment">/*设置边框需要一边的颜色*/</span>
<span class="token property">position</span><span class="token punctuation">:</span><span class="token punctuation">;</span>    <span class="token comment">/*设置元素定位方式*/</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="19-9-鼠标样式"><a href="#19-9-鼠标样式" class="headerlink" title="19.9 鼠标样式"></a>19.9 鼠标样式</h3><blockquote>
<p>使用cursor属性设置或者检索再对象上移动鼠标采用何种系统预定义的光标形状。</p>
<pre class="line-numbers language-java" data-language="java"><code class="language-java">div <span class="token punctuation">&#123;</span>
  cursor<span class="token operator">:</span>pointer<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<table>
<thead>
<tr>
<th>属性值</th>
<th>样式</th>
</tr>
</thead>
<tbody><tr>
<td>default</td>
<td>小白，默认</td>
</tr>
<tr>
<td>pointer</td>
<td>小手，链接样式</td>
</tr>
<tr>
<td>move</td>
<td>移动</td>
</tr>
<tr>
<td>text</td>
<td>文本</td>
</tr>
<tr>
<td>not-allowed</td>
<td>禁止</td>
</tr>
</tbody></table>
</blockquote>
<h2 id="20-溢出元素-Overflow"><a href="#20-溢出元素-Overflow" class="headerlink" title="20 溢出元素(Overflow)"></a>20 溢出元素(Overflow)</h2><blockquote>
<p>overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。</p>
<p>如果有定位的盒子，谨慎使用overflow，会隐藏多余的部分</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">值</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">visible</td>
<td align="left">默认值。内容不会被修剪，会呈现在元素框之外。</td>
</tr>
<tr>
<td align="left">hidden</td>
<td align="left">内容会被修剪，并且其余内容是不可见的。</td>
</tr>
<tr>
<td align="left">scroll</td>
<td align="left">内容会被修剪，但是浏览器一定会显示滚动条以便查看其余的内容。</td>
</tr>
<tr>
<td align="left">auto</td>
<td align="left">如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td>
</tr>
<tr>
<td align="left">inherit</td>
<td align="left">规定应该从父元素继承 overflow 属性的值。</td>
</tr>
</tbody></table>
<h3 id="20-1-visible"><a href="#20-1-visible" class="headerlink" title="20.1  visible"></a>20.1  visible</h3><blockquote>
<p>默认值,会溢出相应的元素位置。</p>
</blockquote>
<div id="overflowTest" style="background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>









<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span> <span class="token punctuation">&#123;</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="20-2-hidden"><a href="#20-2-hidden" class="headerlink" title="20.2  hidden"></a>20.2  hidden</h3><blockquote>
<p>会将溢出内容修剪，无法显示。</p>
</blockquote>
<div id="overflowTest" style="background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: hidden;">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>

<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span> <span class="token punctuation">&#123;</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="20-3-scroll"><a href="#20-3-scroll" class="headerlink" title="20.3  scroll"></a>20.3  scroll</h3><blockquote>
<p>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。(不管修不修剪，都会默认显示滚动条)</p>
</blockquote>
<div id="overflowTest" style="background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: scroll;">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>

<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>
选择器</span> <span class="token punctuation">&#123;</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> scroll<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
&lt;/style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="20-4-auto"><a href="#20-4-auto" class="headerlink" title="20.4  auto"></a>20.4  auto</h3><blockquote>
<p>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。(如果不修剪就不显示滚动条，如果修剪就显示滚动条)</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<hr>
<h2 id="21-浮动-Float"><a href="#21-浮动-Float" class="headerlink" title="21  浮动(Float)"></a>21  浮动(Float)</h2><blockquote>
<p>脱离标准普通流的控制(浮)移动到指定位置,(俗称脱标).</p>
<p>网页布局的第一准则：==多个块级元素纵向排列找标准流，多个块级元素  横向排列找浮动==。</p>
<p>如果父元素中全部子元素浮动，且父元素没有设置长宽高，则父元素中元素因为浮动使父元素高度变为0。</p>
<p>float属性用于创建浮动框，将其移动到一边，直到左边缘或者触及包含块或者另一个浮动框的边缘。</p>
<p>浮动元素会脱离标准流。</p>
<p>浮动的元素会一行内显示并且元素顶部对齐。</p>
<p>浮动的元素会具有行内块元素的特性。</p>
<p>浮动元素之间不会存在空白缝隙。</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
<th align="left">值</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left">clear</td>
<td align="left">指定不允许元素周围有浮动元素。</td>
<td align="left">left right both none inherit</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">float</td>
<td align="left">指定一个盒子（元素）是否可以浮动。</td>
<td align="left">left right none(默认值) inherit</td>
<td align="left"></td>
</tr>
</tbody></table>
<h3 id="21-1-彼此相邻的浮动元素"><a href="#21-1-彼此相邻的浮动元素" class="headerlink" title="21.1  彼此相邻的浮动元素"></a>21.1  彼此相邻的浮动元素</h3><blockquote>
<p>如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。</p>
<p>一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。</p>
<p>浮动元素之后的元素将围绕它。</p>
<p>==浮动元素之前的元素将不会受到影响==浮动盒子会压住之后的兄弟盒子，但是却==不会压住盒子的文字(图片)。==</p>
<p>==绝对定位会完全压住下面标准流的内容。==</p>
<p><code>浮动的盒子不再保留原先的位置。</code></p>
<p>浮动的元素会紧靠在一起，不会有缝隙。行内块元素相邻会产生较大缝隙</p>
</blockquote>
<h3 id="21-2-标准流-普通流-文档流"><a href="#21-2-标准流-普通流-文档流" class="headerlink" title="21.2 标准流(普通流/文档流)"></a>21.2 标准流(普通流/文档流)</h3><blockquote>
<p>标签按照规定好默认方式排序。标准流是最基本的布局方式。</p>
<p>多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。</p>
</blockquote>
<p>1.块级元素会独占一行，从上向下顺序排列。</p>
<p>2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。</p>
<h3 id="21-3-浮动元素经常和标准流父级搭配使用。"><a href="#21-3-浮动元素经常和标准流父级搭配使用。" class="headerlink" title="21.3 浮动元素经常和标准流父级搭配使用。"></a>21.3 浮动元素经常和标准流父级搭配使用。</h3><blockquote>
<p>先用标准的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。</p>
</blockquote>
<h3 id="21-4-一个元素浮动了，理论上其余的兄弟元素也要浮动。"><a href="#21-4-一个元素浮动了，理论上其余的兄弟元素也要浮动。" class="headerlink" title="21.4 一个元素浮动了，理论上其余的兄弟元素也要浮动。"></a>21.4 一个元素浮动了，理论上其余的兄弟元素也要浮动。</h3><blockquote>
<p>一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。</p>
</blockquote>
<h3 id="21-5-清除浮动"><a href="#21-5-清除浮动" class="headerlink" title="21.5  清除浮动"></a>21.5  清除浮动</h3><blockquote>
<ul>
<li>清除浮动的本质是清除浮动元素造成的影响。</li>
<li>如果父盒子本身有高度，则不需要清除浮动。</li>
<li>清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响到下面的标准流了。</li>
<li>清除浮动使用clear属性。</li>
</ul>
</blockquote>
<hr>
<h3 id="清除浮动的方法："><a href="#清除浮动的方法：" class="headerlink" title="清除浮动的方法："></a>清除浮动的方法：</h3><ol>
<li>额外标签法，也称为隔墙法，是W3C推荐的做法。(块级标签)</li>
<li>父级元素添加overflow属性。</li>
<li>父级元素添加after伪元素。</li>
<li>父级元素是添加双伪元素。</li>
</ol>
<h3 id="1-清除浮动-—-额外标签法"><a href="#1-清除浮动-—-额外标签法" class="headerlink" title="1.清除浮动 —- 额外标签法"></a>1.清除浮动 —- 额外标签法</h3><blockquote>
<p>是在浮动元素的末尾添加一个空的标签。</p>
<ul>
<li>优点：通俗易懂，书写方便</li>
<li>缺点：添加许多无意义的标签，结构化较差</li>
</ul>
<p>这个空表标签必须是块级元素。</p>
</blockquote>
<h3 id="2-清除浮动-—-父级元素添加-overflow"><a href="#2-清除浮动-—-父级元素添加-overflow" class="headerlink" title="2 清除浮动 —- 父级元素添加 overflow"></a>2 清除浮动 —- 父级元素添加 overflow</h3><blockquote>
<p>可以给父级元素添加overflow属性，将其属性值设置为hidden,auto或scroll。</p>
<ul>
<li>优点：代码简洁。</li>
<li>缺点：无法显示溢出的部分。</li>
</ul>
</blockquote>
<h3 id="3-清除浮动-—-after伪元素法"><a href="#3-清除浮动-—-after伪元素法" class="headerlink" title="3 清除浮动 —- :after伪元素法"></a>3 清除浮动 —- :after伪元素法</h3><blockquote>
<p>:after 方式是额外标签的升级版。也是给父元素添加</p>
<ul>
<li>优点：没有增加标签，结构更简单。</li>
<li>缺点：照顾低版本浏览器。</li>
</ul>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.clearfix:after</span> <span class="token punctuation">&#123;</span>
    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">""</span><span class="token punctuation">;</span>   <span class="token comment">/*必须要有得属性*/</span>
    <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>		//因为伪元素默认为行级元素，需要转换为块元素
    <span class="token property">height</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>				
    <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span>				//清除浮动核心代码
    <span class="token property">visibility</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span>	  //不显示此伪元素
<span class="token punctuation">&#125;</span>
<span class="token selector">.clearfix</span> <span class="token punctuation">&#123;</span>      <span class="token comment">/* ie6.7专用  */</span>
	*<span class="token property">zoom</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="4-清除浮动-—-双伪元素清除浮动"><a href="#4-清除浮动-—-双伪元素清除浮动" class="headerlink" title="4 清除浮动 —- 双伪元素清除浮动"></a>4 清除浮动 —- 双伪元素清除浮动</h3><blockquote>
<p>是给父元素添加前后空标签。</p>
<ul>
<li>代码更简洁。</li>
<li>照顾低版本浏览器。</li>
</ul>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.clearfix:after,.clearfix:before</span> <span class="token punctuation">&#123;</span>
    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">""</span><span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span>
<span class="token selector">.clearfix:after</span> <span class="token punctuation">&#123;</span>
    <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.clearfix</span> <span class="token punctuation">&#123;</span>
	*<span class="token property">zoom</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="21-6-文本与浮动元素的关系"><a href="#21-6-文本与浮动元素的关系" class="headerlink" title="21.6 文本与浮动元素的关系"></a>21.6 文本与浮动元素的关系</h3><blockquote>
<p>在一个盒子中，如果其中有盒子添加浮动后旁边的文本不会被遮盖住，而是会环绕浮动的盒子显示。</p>
<p>注意：如果文本过长，盒子长度放不开，不会围绕。</p>
</blockquote>
<h2 id="22-布局"><a href="#22-布局" class="headerlink" title="22 布局"></a>22 布局</h2><blockquote>
<p>通过不同方式实现网页内容的不同对齐</p>
</blockquote>
<h3 id="22-1-元素居中对齐"><a href="#22-1-元素居中对齐" class="headerlink" title="22.1  元素居中对齐"></a>22.1  元素居中对齐</h3><blockquote>
<p>要水平居中对齐一个元素(如 <div>), 可以使用 <strong>margin: auto;</strong> 。</p>
<p>设置到元素的宽度将防止它溢出到容器的边缘。</p>
<p>元素通过指定宽度，并将两边的空外边距平均分配：</p>
</blockquote>
<div style="border: 3px solid #73AD21;">
    <div style="
    margin: auto;
    width: 60%;
    border: 3px solid #000000;
    padding: 10px;">
        <p>这是一个元素中的东西</p>
    </div>
</div >

<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">.center</span> <span class="token punctuation">&#123;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>  <span class="token comment">/*设置元素居中*/</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 60%<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 3px solid #73AD21<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
-----------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>一些文本<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="22-2-文本居中对齐"><a href="#22-2-文本居中对齐" class="headerlink" title="22.2  文本居中对齐"></a>22.2  文本居中对齐</h3><blockquote>
<p>如果仅仅是为了文本在元素内居中对齐，可以使用 <strong>text-align: center;</strong></p>
</blockquote>
<div style="border: 3px solid #73AD21; text-align:center;">
    这是一些文本
</div>

<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">.center</span> <span class="token punctuation">&#123;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 3px solid green<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
----------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>文本居中对齐<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="22-3-图片居中对齐"><a href="#22-3-图片居中对齐" class="headerlink" title="22.3  图片居中对齐"></a>22.3  图片居中对齐</h3><blockquote>
<p>要让图片居中对齐, 可以使用 <strong>margin: auto;</strong> 并将它放到 <strong>块</strong> 元素中:</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">img</span> <span class="token punctuation">&#123;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span>  auto<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片路径<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片简称<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span>40%</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="22-4-左右对齐-使用定位"><a href="#22-4-左右对齐-使用定位" class="headerlink" title="22.4  左右对齐-使用定位"></a>22.4  左右对齐-使用定位</h3><blockquote>
<p>我们可以使用 <strong>position: absolute;</strong> 属性来对齐元素:</p>
</blockquote>
<div style="border: 3px solid #73AD21;height:100px;">
    <div style="
    position:absolute;
    right:0px;
    width: 30%;
    height:100px;
    border: 3px solid #000000;
    padding: 10px;">
        <p style="margin:auto">元素</p>
    </div>
</div >

<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">.right</span> <span class="token punctuation">&#123;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">right</span><span class="token punctuation">:</span> -50%<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 3px solid #73AD21<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
-------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>一些元素<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="22-5-左右对齐-使用float方式"><a href="#22-5-左右对齐-使用float方式" class="headerlink" title="22.5  左右对齐-使用float方式"></a>22.5  左右对齐-使用float方式</h3><blockquote>
<p>我们也可以使用 <strong>float</strong> 属性来对齐元素:</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span>
    <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>  <span class="token comment">/* 设置左右对齐*/</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="22-6-垂直居中-使用padding"><a href="#22-6-垂直居中-使用padding" class="headerlink" title="22.6  垂直居中-使用padding"></a>22.6  垂直居中-使用padding</h3><blockquote>
<p>CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 <strong>padding</strong>:</p>
</blockquote>
<div style=" padding: 20px 0;
    border: 3px solid green;">
  <p>设置垂直居中</p>
</div>

<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">选择器</span> <span class="token punctuation">&#123;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 20px 0<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 3px solid green<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>我是垂直居中的。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="22-7-垂直居中-使用Line-height"><a href="#22-7-垂直居中-使用Line-height" class="headerlink" title="22.7  垂直居中-使用Line-height"></a>22.7  垂直居中-使用Line-height</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.center</span> <span class="token punctuation">&#123;</span>
    <span class="token property">line-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span><span class="token comment">/*设置行高为200*/</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span><span class="token comment">/*设置元素高位200*/</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 3px solid green<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><span class="token comment">/*设置文字居中*/</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="22-8-垂直居中-使用Position和transform"><a href="#22-8-垂直居中-使用Position和transform" class="headerlink" title="22.8  垂直居中-使用Position和transform"></a>22.8  垂直居中-使用Position和transform</h3><h3 id="22-9-图片和文字水平对齐"><a href="#22-9-图片和文字水平对齐" class="headerlink" title="22.9 图片和文字水平对齐"></a>22.9 图片和文字水平对齐</h3><blockquote>
<p>vertical-align : 属性来设置对齐的样式。</p>
<p>此元素只对行内元素和行内块元素有效。</p>
</blockquote>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>baseline</td>
<td>默认。元素放置在父元素的基线上。</td>
<td></td>
</tr>
<tr>
<td>top</td>
<td>把元素的顶端与行中最高元素的顶端对齐。</td>
<td></td>
</tr>
<tr>
<td>middle</td>
<td>把此元素放置在父元素的中部。</td>
<td>常用</td>
</tr>
<tr>
<td>bottom</td>
<td>把元素的顶端与行中最低的元素的顶端对齐</td>
<td></td>
</tr>
</tbody></table>
<h3 id="22-30图片底侧空白缝隙"><a href="#22-30图片底侧空白缝隙" class="headerlink" title="22.30图片底侧空白缝隙"></a>22.30图片底侧空白缝隙</h3><blockquote>
<p> 图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。</p>
<p> 解决方法： 1.给图片添加 vertical-align: middle | top | bottom属性。</p>
<p> ​                    2. 把图片转换为块级元素。 display:block.</p>
</blockquote>
<h2 id="23-组合选择符"><a href="#23-组合选择符" class="headerlink" title="23 组合选择符"></a>23 组合选择符</h2><blockquote>
<p>组合选择符说明了两个选择器直接的关系。</p>
</blockquote>
<h3 id="23-1-后代选择器"><a href="#23-1-后代选择器" class="headerlink" title="23.1  后代选择器"></a>23.1  后代选择器</h3><blockquote>
<p>选取指定父元素中指定子元素</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css">div p  <span class="token comment">/*指定div标签中的p标签*/</span>
<span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span>yellow<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="23-2-子元素选择器"><a href="#23-2-子元素选择器" class="headerlink" title="23.2 子元素选择器"></a>23.2 子元素选择器</h3><blockquote>
<p>子元素选择器（Child selectors）只能选择作为某元素子元素的元素。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css">div>p    <span class="token comment">/*选择div标签中的子标签p标签*/</span>
<span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span>yellow<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="23-3-后续兄弟选择器"><a href="#23-3-后续兄弟选择器" class="headerlink" title="23.3 后续兄弟选择器"></a>23.3 后续兄弟选择器</h3><blockquote>
<p>后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"> div~p  <span class="token comment">/*指定div标签的兄弟标签p标签*/</span>
<span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span>yellow<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>



<h2 id="24-伪类-Pseudo-classes"><a href="#24-伪类-Pseudo-classes" class="headerlink" title="24 伪类(Pseudo-classes)"></a>24 伪类(Pseudo-classes)</h2><blockquote>
<p>CSS伪类是用来添加一些选择器的特殊效果。更加具体的选择器控制。</p>
<p>伪类语法：</p>
<p>​    选择器 ：伪类 { css语句 }</p>
<p>​    选择器.类名 ：伪类 { css语句 }</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">选择器</th>
<th align="left">示例</th>
<th align="left">示例说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">:checked</td>
<td align="left">input:checked</td>
<td align="left">选择所有选中的表单元素</td>
</tr>
<tr>
<td align="left">:disabled</td>
<td align="left">input:disabled</td>
<td align="left">选择所有禁用的表单元素</td>
</tr>
<tr>
<td align="left">:empty</td>
<td align="left">p:empty</td>
<td align="left">选择所有没有子元素的p元素</td>
</tr>
<tr>
<td align="left">:enabled</td>
<td align="left">input:enabled</td>
<td align="left">选择所有启用的表单元素</td>
</tr>
<tr>
<td align="left">:first-of-type</td>
<td align="left">p:first-of-type</td>
<td align="left">选择的每个 p 元素是其父元素的第一个 p 元素</td>
</tr>
<tr>
<td align="left">:in-range</td>
<td align="left">input:in-range</td>
<td align="left">选择元素指定范围内的值</td>
</tr>
<tr>
<td align="left">:invalid</td>
<td align="left">input:invalid</td>
<td align="left">选择所有无效的元素</td>
</tr>
<tr>
<td align="left">:last-child</td>
<td align="left">p:last-child</td>
<td align="left">选择所有p元素的最后一个子元素</td>
</tr>
<tr>
<td align="left">:last-of-type</td>
<td align="left">p:last-of-type</td>
<td align="left">选择每个p元素是其母元素的最后一个p元素</td>
</tr>
<tr>
<td align="left">:not(selector)</td>
<td align="left">:not(p)</td>
<td align="left">选择所有p以外的元素</td>
</tr>
<tr>
<td align="left">:nth-child(n)</td>
<td align="left">p:nth-child(2)</td>
<td align="left">选择所有 p 元素的父元素的第二个子元素</td>
</tr>
<tr>
<td align="left">:nth-last-child(n)</td>
<td align="left">p:nth-last-child(2)</td>
<td align="left">选择所有p元素倒数的第二个子元素</td>
</tr>
<tr>
<td align="left">:nth-last-of-type(n)</td>
<td align="left">p:nth-last-of-type(2)</td>
<td align="left">选择所有p元素倒数的第二个为p的子元素</td>
</tr>
<tr>
<td align="left">:nth-of-type(n)</td>
<td align="left">p:nth-of-type(2)</td>
<td align="left">选择所有p元素第二个为p的子元素</td>
</tr>
<tr>
<td align="left">:only-of-type</td>
<td align="left">p:only-of-type</td>
<td align="left">选择所有仅有一个子元素为p的元素</td>
</tr>
<tr>
<td align="left">:only-child</td>
<td align="left">p:only-child</td>
<td align="left">选择所有仅有一个子元素的p元素</td>
</tr>
<tr>
<td align="left">:optional]</td>
<td align="left">input:optional</td>
<td align="left">选择没有”required”的元素属性</td>
</tr>
<tr>
<td align="left">:out-of-range</td>
<td align="left">input:out-of-range</td>
<td align="left">选择指定范围以外的值的元素属性</td>
</tr>
<tr>
<td align="left">:read-only</td>
<td align="left">input:read-only</td>
<td align="left">选择只读属性的元素属性</td>
</tr>
<tr>
<td align="left">:read-write</td>
<td align="left">input:read-write</td>
<td align="left">选择没有只读属性的元素属性</td>
</tr>
<tr>
<td align="left">:required</td>
<td align="left">input:required</td>
<td align="left">选择有”required”属性指定的元素属性</td>
</tr>
<tr>
<td align="left">:root</td>
<td align="left">root</td>
<td align="left">选择文档的根元素</td>
</tr>
<tr>
<td align="left">:target</td>
<td align="left">#news:target</td>
<td align="left">选择当前活动#news元素(点击URL包含锚的名字)</td>
</tr>
<tr>
<td align="left">:valid</td>
<td align="left">input:valid</td>
<td align="left">选择所有有效值的属性</td>
</tr>
<tr>
<td align="left">:link</td>
<td align="left">a:link</td>
<td align="left">选择所有未访问链接</td>
</tr>
<tr>
<td align="left">:visited</td>
<td align="left">a:visited</td>
<td align="left">选择所有访问过的链接</td>
</tr>
<tr>
<td align="left">:active</td>
<td align="left">a:active</td>
<td align="left">选择正在活动链接</td>
</tr>
<tr>
<td align="left">:hover</td>
<td align="left">a:hover</td>
<td align="left">把鼠标放在链接上的状态</td>
</tr>
<tr>
<td align="left">:focus</td>
<td align="left">input:focus</td>
<td align="left">选择元素输入后具有焦点</td>
</tr>
<tr>
<td align="left">:first-letter</td>
<td align="left">p:first-letter</td>
<td align="left">选择每个<p> 元素的第一个字母</td>
</tr>
<tr>
<td align="left">:first-line</td>
<td align="left">p:first-line</td>
<td align="left">选择每个<p> 元素的第一行</td>
</tr>
<tr>
<td align="left">:first-child</td>
<td align="left">p:first-child</td>
<td align="left">选择器匹配属于任意元素的第一个子元素的 <p> 元素</td>
</tr>
<tr>
<td align="left">:before</td>
<td align="left">p:before</td>
<td align="left">在每个<p>元素之前插入内容</td>
</tr>
<tr>
<td align="left">:after</td>
<td align="left">p:after</td>
<td align="left">在每个<p>元素之后插入内容</td>
</tr>
<tr>
<td align="left">:lang(<em>language</em>)</td>
<td align="left">p:lang(it)</td>
<td align="left">为<p>元素的lang属性选择一个开始值</td>
</tr>
</tbody></table>
<h3 id="24-1-伪元素-before"><a href="#24-1-伪元素-before" class="headerlink" title="24.1 伪元素 ::before"></a>24.1 伪元素 ::before</h3><blockquote>
<ul>
<li>before和after创建一个元素，但是属于行内元素。</li>
<li>新创建的元素在文档树中找不到，所以称为伪元素  。</li>
<li>before和after必须有content属性</li>
</ul>
</blockquote>
<blockquote>
<p>再指定元素内部的前面插入内容</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">div::before</span><span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">"显示内容"</span>；
  <span class="token property">width</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="24-2-伪元素-after"><a href="#24-2-伪元素-after" class="headerlink" title="24.2 伪元素 ::after"></a>24.2 伪元素 ::after</h3><blockquote>
<p>再指定元素内部的后面插入内容</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">div::after</span><span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">"显示内容"</span>；
  <span class="token property">width</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h2 id="25-伪类选择器"><a href="#25-伪类选择器" class="headerlink" title="25  伪类选择器"></a>25  伪类选择器</h2><blockquote>
<p>CSS伪类是用来添加一些选择器的特殊效果。更加具体的选择器控制。</p>
<p>伪类语法：</p>
<p>​    选择器 ：伪元素 { css语句 }</p>
<p>​    选择器.类名 ：伪元素 { css语句 }</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">选择器</th>
<th align="left">示例</th>
<th align="left">示例说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">:link</td>
<td align="left">a:link</td>
<td align="left">选择所有未访问链接</td>
</tr>
<tr>
<td align="left">:visited</td>
<td align="left">a:visited</td>
<td align="left">选择所有访问过的链接</td>
</tr>
<tr>
<td align="left">:active</td>
<td align="left">a:active</td>
<td align="left">选择正在活动链接</td>
</tr>
<tr>
<td align="left">:hover</td>
<td align="left">a:hover</td>
<td align="left">把鼠标放在链接上的状态</td>
</tr>
<tr>
<td align="left">:focus</td>
<td align="left">input:focus</td>
<td align="left">选择元素输入后具有焦点</td>
</tr>
<tr>
<td align="left">:first-letter</td>
<td align="left">p:first-letter</td>
<td align="left">选择每个<p> 元素的第一个字母</td>
</tr>
<tr>
<td align="left">:first-line</td>
<td align="left">p:first-line</td>
<td align="left">选择每个<p> 元素的第一行</td>
</tr>
<tr>
<td align="left">:first-child</td>
<td align="left">p:first-child</td>
<td align="left">选择器匹配属于任意元素的第一个子元素的 <p> 元素</td>
</tr>
<tr>
<td align="left">::before</td>
<td align="left">p:before</td>
<td align="left">在每个<p>元素之前插入内容</td>
</tr>
<tr>
<td align="left">::after</td>
<td align="left">p:after</td>
<td align="left">在每个<p>元素之后插入内容</td>
</tr>
<tr>
<td align="left">:lang(<em>language</em>)</td>
<td align="left">p:lang(it)</td>
<td align="left">为<p>元素的lang属性选择一个开始值</td>
</tr>
</tbody></table>
<h3 id="25-1-伪类选择器-first-child"><a href="#25-1-伪类选择器-first-child" class="headerlink" title="25.1 伪类选择器 :first-child"></a>25.1 伪类选择器 :first-child</h3><p>选择指定元素中的第一个子元素，如果是指定元素就选中。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">ul li:first-child</span><span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>pink<span class="token punctuation">;</span>     //选择ul标签中的第一个子元素，如果是li标签就选中它
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<ul>
<li>先将指定元素中的所有子元素排序选择第一个子元素，判断是否为指定标签，如果是就选中它，如果不是就放弃</li>
</ul>
<h3 id="25-2-伪类选择器-last-child"><a href="#25-2-伪类选择器-last-child" class="headerlink" title="25.2 伪类选择器 :last-child"></a>25.2 伪类选择器 :last-child</h3><p>选择指定元素中的最后一个子元素，如果是指定元素就选中。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">ul li:last-child</span><span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>pink<span class="token punctuation">;</span>     //选择ul标签中的最后一个个子元素，如果是li标签就选中它
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<ul>
<li>先将指定元素中的所有子元素排序选择最后子元素，判断是否为指定标签，如果是就选中它，如果不是就放弃</li>
</ul>
<h3 id="25-3-伪类选择器-nth-child"><a href="#25-3-伪类选择器-nth-child" class="headerlink" title="25.3 伪类选择器 :nth-child()"></a>25.3 伪类选择器 :nth-child()</h3><p>:nth-child()中可以填写数字，公式，关键字</p>
<p>==先排序再选中，再判断是否为指定标签。==</p>
<ul>
<li>如果是数字，就是选择第n个子元素</li>
</ul>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p :nth-child(2)</span><span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>pink<span class="token punctuation">;</span>     //选择p标签的第二个子元素。
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<ul>
<li>如果是关键字，选择指定的子元素</li>
</ul>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">ul li:nth-child(even)</span><span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>pink<span class="token punctuation">;</span>     //选择ul标签的偶数li标签子元素。
<span class="token punctuation">&#125;</span>
<span class="token selector">ul li:nth-child(odd)</span><span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>pink<span class="token punctuation">;</span>     //选择ul标签的奇数li标签子元素。
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<ul>
<li><p> 如果公式：</p>
</li>
<li><p> 如果使用n的公式，则从0开始计算，但是第0个元素和超出的元素的个数会被忽略。</p>
</li>
</ul>
<table>
<thead>
<tr>
<th>公式</th>
<th>取值</th>
</tr>
</thead>
<tbody><tr>
<td>2n</td>
<td>偶数</td>
</tr>
<tr>
<td>2n+1</td>
<td>奇数</td>
</tr>
<tr>
<td>5n</td>
<td>5 10 15 …</td>
</tr>
<tr>
<td>n + 5</td>
<td>从第五个开始</td>
</tr>
<tr>
<td>-n + 5</td>
<td>前五个</td>
</tr>
</tbody></table>
<h3 id="25-4-伪元素选择器-first-of-type"><a href="#25-4-伪元素选择器-first-of-type" class="headerlink" title="25.4 伪元素选择器 :first-of-type"></a>25.4 伪元素选择器 :first-of-type</h3><p>选择指定元素中的第一个子元素,先将指定元素中的指定子元素排序，再选中</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">ul li:first-of-type</span><span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>pink<span class="token punctuation">;</span>     //选择ul标签中所有指定元素，排序后选中第一个元素
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<ul>
<li>先将指定元素中的所有指定子元素选择出来排序后选择第一个子元素。</li>
</ul>
<h3 id="25-5-伪类选择器-last-of-type"><a href="#25-5-伪类选择器-last-of-type" class="headerlink" title="25.5 伪类选择器 :last-of-type"></a>25.5 伪类选择器 :last-of-type</h3><p>选择指定元素中的最后一个子元素,先将指定元素中的指定子元素排序，再选中</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">ul li:last-of-type</span><span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>pink<span class="token punctuation">;</span>     //选择ul标签中所有指定元素，排序后选中最后一个元素
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<ul>
<li>先将指定元素中的所有指定子元素选择出来排序后选择最后一个子元素。</li>
</ul>
<h3 id="25-6-伪类选择器-nth-of-type"><a href="#25-6-伪类选择器-nth-of-type" class="headerlink" title="25.6 伪类选择器 :nth-of-type()"></a>25.6 伪类选择器 :nth-of-type()</h3><p>:nth-of-type())中可以填写数字，公式，关键字</p>
<p>==先判断是否是指定标签的指定子元素，再排序，再选中==</p>
<ul>
<li>如果是数字，就是选择第n个子元素</li>
</ul>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p :nth-of-type(2)</span><span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>pink<span class="token punctuation">;</span>     //选择p标签的第二个子元素。
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<ul>
<li>如果是关键字，选择指定的子元素</li>
</ul>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">ul li:nth-of-type(even)</span><span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>pink<span class="token punctuation">;</span>     //选择ul标签的偶数li标签子元素。
<span class="token punctuation">&#125;</span>
<span class="token selector">ul li:nth-of-type(odd)</span><span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>pink<span class="token punctuation">;</span>     //选择ul标签的奇数li标签子元素。
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<ul>
<li><p> 如果公式：</p>
</li>
<li><p> 如果使用n的公式，则从0开始计算，但是第0个元素和超出的元素的个数会被忽略。</p>
</li>
</ul>
<table>
<thead>
<tr>
<th>公式</th>
<th>取值</th>
</tr>
</thead>
<tbody><tr>
<td>2n</td>
<td>偶数</td>
</tr>
<tr>
<td>2n+1</td>
<td>奇数</td>
</tr>
<tr>
<td>5n</td>
<td>5 10 15 …</td>
</tr>
<tr>
<td>n + 5</td>
<td>从第五个开始</td>
</tr>
<tr>
<td>-n + 5</td>
<td>前五个</td>
</tr>
</tbody></table>
<h2 id="26-导航栏"><a href="#26-导航栏" class="headerlink" title="26 导航栏"></a>26 导航栏</h2><blockquote>
<p> 导航栏(调整颜色背景，调整悬停效果)=链接列表</p>
</blockquote>
<ul>     <!--通用的导航格式-->
<li><a href="#home">导航一</a></li>
<li><a href="#news">导航二</a></li>
<li><a href="#contact">导航三</a></li>
<li><a href="#about">导航四</a></li>
</ul>

<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>     <span class="token comment">&lt;!--通用的导航格式--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#home<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航一<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#news<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航二<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#contact<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航四<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="26-1-垂直导航栏"><a href="#26-1-垂直导航栏" class="headerlink" title="26.1 垂直导航栏"></a>26.1 垂直导航栏</h3><blockquote>
<p>通过调整背景，取消列表标志，修改填充来美化导航栏</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">ul</span> <span class="token punctuation">&#123;</span>
  <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>  <span class="token comment">/*设置列表标志为空*/</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>  <span class="token comment">/*设置外边距为0*/</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>  <span class="token comment">/*设置填充为0*/</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">li a</span> <span class="token punctuation">&#123;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>  <span class="token comment">/*设置块*/</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>  <span class="token comment">/*设置宽度*/</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>  <span class="token comment">/*设置背景颜色*/</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>		<span class="token comment">/*设置超链接没有下划线*/</span>
    <span class="token punctuation">&#125;</span>
<span class="token selector">li a.active</span> <span class="token punctuation">&#123;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token comment">/*设置点击后跳转完的背景颜色*/</span>
    <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">li a:hover</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #555<span class="token punctuation">;</span>  <span class="token comment">/*设置悬停时的背景颜色*/</span>
  <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
    
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
----------------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>     <span class="token comment">&lt;!--通用的导航格式--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#home<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航一<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#news<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航二<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#contact<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航四<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>



<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="26-2-全屏固定高度的导航栏"><a href="#26-2-全屏固定高度的导航栏" class="headerlink" title="26.2 全屏固定高度的导航栏"></a>26.2 全屏固定高度的导航栏</h3><blockquote>
<p>通过设置position: fixed; 属性实现导航栏固定在当前窗口。</p>
</blockquote>
<h3 id="26-3-水平导航栏"><a href="#26-3-水平导航栏" class="headerlink" title="26.3  水平导航栏"></a>26.3  水平导航栏</h3><blockquote>
<p>有两种方法创建横向导航栏。使用**内联(inline)<strong>或</strong>浮动(float)**的列表项。</p>
<p>这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。</p>
<p>display:block; /<em>设置后，点击可跳转的不只是文本，变为整个元素</em>/</p>
</blockquote>
<p>内联列表项</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">ul</span>
<span class="token punctuation">&#123;</span>
	<span class="token property">list-style-type</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
	<span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
	<span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">li</span>
<span class="token punctuation">&#123;</span>
<span class="token property">display</span><span class="token punctuation">:</span>inline<span class="token punctuation">;</span> <span class="token comment">/*设置li标签内联*/</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
----------------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>     <span class="token comment">&lt;!--通用的导航格式--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#home<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航一<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#news<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航二<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#contact<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航四<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<p>浮动列表项</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">ul</span>
<span class="token punctuation">&#123;</span>
	<span class="token property">list-style-type</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
	<span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
	<span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
	<span class="token property">overflow</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">li</span>
<span class="token punctuation">&#123;</span>
	<span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token comment">/*设置浮动*/</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">a</span>
<span class="token punctuation">&#123;</span>
	<span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> <span class="token comment">/*设置后，点击可跳转的不只是文本，变为整个元素*/</span>
	<span class="token property">width</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span>#dddddd<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
----------------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>     <span class="token comment">&lt;!--通用的导航格式--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#home<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航一<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#news<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航二<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#contact<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航四<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="26-4-总结"><a href="#26-4-总结" class="headerlink" title="26.4  总结"></a>26.4  总结</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> 去除列表前的下表志

<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>  让整体变为可点击链接区域（不只是文本），允许指定宽度。

li <span class="token property">a</span><span class="token punctuation">:</span>hover   鼠标移动到选项上修改背景颜色

<span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>   设置全屏高度的固定导航条

<span class="token property">border-right</span><span class="token punctuation">:</span> 1px 样式 颜色<span class="token punctuation">;</span>  添加间隔线<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<hr>
<h2 id="27-下拉菜单"><a href="#27-下拉菜单" class="headerlink" title="27  下拉菜单"></a>27  下拉菜单</h2><blockquote>
<p>使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。</p>
<p>我们可以使用任何的 HTML 元素来打开下拉菜单，如：&lt;span&gt;, 或 a &lt;button&gt; 元素。</p>
<p>下拉列表的关键是display属性的:hover的运用。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
    <span class="token selector">.下拉按钮选择器</span> <span class="token punctuation">&#123;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> 颜色<span class="token punctuation">;</span>
        <span class="token property">position</span><span class="token punctuation">:</span> 定位类型<span class="token punctuation">;</span>
        <span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span> <span class="token comment">/*设置按键为内联块元素，可以改变大小*/</span>
    <span class="token punctuation">&#125;</span>
    <span class="token selector">.下拉内容选择器</span> <span class="token punctuation">&#123;</span>
        <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>   <span class="token comment">/*设置下拉内容标签为不显示*/</span>
  		<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>   <span class="token comment">/*设置位置*/</span>
  		<span class="token property">background-color</span><span class="token punctuation">:</span> #f9f9f9<span class="token punctuation">;</span>   <span class="token comment">/*设置背景颜色*/</span>
  		<span class="token property">min-width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span>   <span class="token comment">/*设置下拉列表最小宽度*/</span>
  		<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 8px 16px 0px 			<span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.2<span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">/*设置阴影*/</span>
  		<span class="token property">padding</span><span class="token punctuation">:</span> 12px 16px<span class="token punctuation">;</span>   <span class="token comment">/*设置填充*/</span>
    <span class="token punctuation">&#125;</span>
    <span class="token selector">.下拉按钮选择器:hover .下拉内容选择器</span><span class="token punctuation">&#123;</span>
        <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><span class="token comment">/*设置悬停的下拉按键显示*/</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>下拉按键<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>   
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>这是一个按键<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>下拉内容选择器<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>要下拉的内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h2 id="28-提示工具-Tooltip"><a href="#28-提示工具-Tooltip" class="headerlink" title="28 提示工具(Tooltip)"></a>28 提示工具(Tooltip)</h2><blockquote>
<p>提示工具在鼠标移动到指定元素后触发,出现隐藏的提示框。</p>
<p>当用display:none -&gt; display：block 默认出现在按钮的下方。</p>
</blockquote>
<h3 id="28-1-基础提示框"><a href="#28-1-基础提示框" class="headerlink" title="28.1  基础提示框"></a>28.1  基础提示框</h3><blockquote>
<p>提示框在鼠标移动到指定元素上显示</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">.被提示文本的选择器</span> <span class="token punctuation">&#123;</span>
		<span class="token property">position</span><span class="token punctuation">:</span> relattive<span class="token punctuation">;</span>  <span class="token comment">/*设置位置*/</span>
		<span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span>  <span class="token comment">/*设置显示样式*/</span>
		<span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px dotted black<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span>
    <span class="token comment">/*选择被提示文本嵌套的提示信息*/</span>
<span class="token selector">.被提示文本的选择器  .提示信息选择器</span> <span class="token punctuation">&#123;</span>
        <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token comment">/* 设置隐藏*/</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
    	<span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
    	<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
    	<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    	<span class="token property">border-radius</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token comment">/*设置提示信息框的圆角*/</span>
    	<span class="token property">padding</span><span class="token punctuation">:</span> 5px 0<span class="token punctuation">;</span>
    	<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    	<span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>  <span class="token comment">/*设置z轴位置悬浮于平面之上*/</span>
    <span class="token punctuation">&#125;</span>
<span class="token selector">.被提示文本的选择器  .提示信息选择器</span><span class="token punctuation">&#123;</span>
        <span class="token property">visibility</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span><span class="token comment">/*将隐藏的提示信息显示*/</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>被提示文本的选择器<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>文本
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提示信息选择器<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="28-2-控制出现位置"><a href="#28-2-控制出现位置" class="headerlink" title="28.2 控制出现位置"></a>28.2 控制出现位置</h3><blockquote>
<p>通过控制提示信息选择器中的right/left属性来控制提示信息出现的位置。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">.被提示文本的选择器</span> <span class="token punctuation">&#123;</span>
		<span class="token property">position</span><span class="token punctuation">:</span> relattive<span class="token punctuation">;</span>  <span class="token comment">/*设置位置*/</span>
		<span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span>  <span class="token comment">/*设置显示样式*/</span>
		<span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px dotted black<span class="token punctuation">;</span> 
<span class="token punctuation">&#125;</span>
    <span class="token comment">/*选择被提示文本嵌套的提示信息*/</span>
<span class="token selector">.被提示文本的选择器  .提示信息选择器</span> <span class="token punctuation">&#123;</span>
        <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token comment">/* 设置隐藏*/</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
    	<span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
    	<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
    	<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    	<span class="token property">border-radius</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token comment">/*设置提示信息框的圆角*/</span>
    	<span class="token property">padding</span><span class="token punctuation">:</span> 5px 0<span class="token punctuation">;</span>
    	<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    	<span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>  <span class="token comment">/*设置z轴位置悬浮于平面之上*/</span>
    <span class="token punctuation">&#125;</span>
 <span class="token comment">/*在选定标签选择器后添加*/</span>
<span class="token selector">.被提示文本的选择器  .提示信息选择器:after</span><span class="token punctuation">&#123;</span>
        <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>			<span class="token comment">/*与:after一起使用*/</span>
    	<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><span class="token comment">/*父元素为基准*/</span>
    	<span class="token property">top</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    	<span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    	<span class="token property">margin-left</span><span class="token punctuation">:</span> -5px<span class="token punctuation">;</span>
    	<span class="token property">border-width</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    	<span class="token property">border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span>
    	<span class="token property">border-color</span><span class="token punctuation">:</span> black transparent transparent transparent<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token selector">.被提示文本的选择器:hover  .提示信息选择器</span><span class="token punctuation">&#123;</span>
        <span class="token property">visibility</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span><span class="token comment">/*将隐藏的提示信息显示*/</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>被提示文本的选择器<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>文本
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提示信息选择器<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="28-3-控制提示信息框箭头"><a href="#28-3-控制提示信息框箭头" class="headerlink" title="28.3 控制提示信息框箭头"></a>28.3 控制提示信息框箭头</h3><blockquote>
<p>提示信息框的箭头</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">.被提示文本的选择器  .提示信息选择器</span> <span class="token punctuation">&#123;</span>
        <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token comment">/* 设置隐藏*/</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
    	<span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
    	<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
    	<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    	<span class="token property">border-radius</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token comment">/*设置提示信息框的圆角*/</span>
    	<span class="token property">padding</span><span class="token punctuation">:</span> 5px 0<span class="token punctuation">;</span>
    	<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><span class="token comment">/*相比较父标签的位置*/</span>
    	<span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>  <span class="token comment">/*设置z轴位置悬浮于平面之上*/</span>
    	<span class="token property">right</span><span class="token punctuation">:</span>100% /  <span class="token property">left</span><span class="token punctuation">:</span>100% 
        <span class="token property">top</span><span class="token punctuation">:</span>100%  /  <span class="token property">bottom</span><span class="token punctuation">:</span>100%    
            <span class="token comment">/*控制提示信息出现在左面还是右面*/</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="28-4-淡入效果"><a href="#28-4-淡入效果" class="headerlink" title="28.4 淡入效果"></a>28.4 淡入效果</h3><blockquote>
<p>设置提示信息的淡入效果（过渡效果，见下文）</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* 淡入 - 3秒内从 0% 到 100% 显示: */</span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> opacity 3s<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>







<h2 id="29-图片廊"><a href="#29-图片廊" class="headerlink" title="29 图片廊"></a>29 图片廊</h2><blockquote>
<p>创建图片展示区。</p>
<p>本质上就是一个元素块中包含图片和介绍信息，添加悬停效果。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
    <span class="token comment">/*设定包含图片的元素块*/</span>
<span class="token selector">div.img</span> <span class="token punctuation">&#123;</span>  
    <span class="token property">margin</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span>
    <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
	<span class="token comment">/*设定元素块悬浮效果*/</span>
<span class="token selector">div.img:hover</span> <span class="token punctuation">&#123;</span>  
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #777<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
	<span class="token comment">/*设定图片大小*/</span>
<span class="token selector">div.img img</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
    <span class="token comment">/*设定介绍文字的具体形式*/</span>
<span class="token selector">div.desc</span> <span class="token punctuation">&#123;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
--------------------------------

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>responsive<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!--用超链接标签包裹图片标签，使图片具有超链接的作用--></span>  
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片地址<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片地址<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片文本描述<span class="token punctuation">"</span></span> 		 <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
      
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>desc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这里添加图片文本描述<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h2 id="30-图像透明-不透明"><a href="#30-图像透明-不透明" class="headerlink" title="30 图像透明/不透明"></a>30 图像透明/不透明</h2><blockquote>
<p>通过opacity:属性来控制元素的透明度。</p>
<p>也可以使用transition: opacity 时间s 来控制动作的时间效果。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">img</span>
<span class="token punctuation">&#123;</span>
	<span class="token property">opacity</span><span class="token punctuation">:</span>50%<span class="token punctuation">;</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> opacity 3s<span class="token punctuation">;</span> <span class="token comment">/* 控制淡入效果*/</span>	
<span class="token punctuation">&#125;</span>
<span class="token selector">img:hover</span>
<span class="token punctuation">&#123;</span>
	<span class="token property">opacity</span><span class="token punctuation">:</span>1.0<span class="token punctuation">;</span>	
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
--------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>opacity 属性通常与 :hover 选择器一起使用，在鼠标移动到图片上后改变图片的透明度：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片地址<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>113<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>klematis<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>


<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h2 id="31-图像拼合技术"><a href="#31-图像拼合技术" class="headerlink" title="31 图像拼合技术"></a>31 图像拼合技术</h2><blockquote>
<p>图像拼合就是单个图像的集合。</p>
<p>有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。</p>
<p>使用图像拼合会降低服务器的请求数量，并节省带宽。</p>
<p>实质：将<img src="https://www.runoob.com/images/img_navsprites.gif">这样的图像分别显示一部分。通过固定元素的位置，移动元素背景图片来实现分别显示图片的一部分。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">#列表选择器</span><span class="token punctuation">&#123;</span>
    <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token selector">#列表选择器 li</span><span class="token punctuation">&#123;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
    <span class="token property">list-style</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>  <span class="token comment">/*设置列表无开头符号*/</span>
    <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token selector">#列表选择器 li, #列表选择器 a</span><span class="token punctuation">&#123;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>44px<span class="token punctuation">;</span>    <span class="token comment">/*设置元素的高度*/</span>
    <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token selector">#li选择器</span><span class="token punctuation">&#123;</span>
    <span class="token property">left</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>46px<span class="token punctuation">;</span>   <span class="token comment">/*设置元素宽度*/</span>
    <span class="token punctuation">&#125;</span>
<span class="token comment">/* 设置常显示的图片*/</span>
<span class="token selector">#li选择器</span><span class="token punctuation">&#123;</span>
    <span class="token property">background</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>背景图片路径<span class="token punctuation">)</span></span> 水平距离 垂直距离<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token comment">/*设置鼠标悬停的图片*/</span>    
<span class="token selector">#li选择器 a:hover</span><span class="token punctuation">&#123;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>选中后背景图片路径<span class="token punctuation">)</span></span> 水平距离 垂直距离<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
-------------------------------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>列表选择器<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>li选择器<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>超链接地址<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h2 id="32-媒体类型设置"><a href="#32-媒体类型设置" class="headerlink" title="32 媒体类型设置"></a>32 媒体类型设置</h2><blockquote>
<p>媒体类型允许指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。</p>
<p>@media 规则允许在相同样式表为不同媒体设置不同的样式。 </p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">媒体类型</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">all</td>
<td align="left">用于所有的媒体设备。</td>
</tr>
<tr>
<td align="left">aural</td>
<td align="left">用于语音和音频合成器。</td>
</tr>
<tr>
<td align="left">braille</td>
<td align="left">用于盲人用点字法触觉回馈设备。</td>
</tr>
<tr>
<td align="left">embossed</td>
<td align="left">用于分页的盲人用点字法打印机。</td>
</tr>
<tr>
<td align="left">handheld</td>
<td align="left">用于小的手持的设备。</td>
</tr>
<tr>
<td align="left">print</td>
<td align="left">用于打印机。</td>
</tr>
<tr>
<td align="left">projection</td>
<td align="left">用于方案展示，比如幻灯片。</td>
</tr>
<tr>
<td align="left">screen</td>
<td align="left">用于电脑显示器。</td>
</tr>
<tr>
<td align="left">tty</td>
<td align="left">用于使用固定密度字母栅格的媒体，比如电传打字机和终端。</td>
</tr>
<tr>
<td align="left">tv</td>
<td align="left">用于电视机类型的设备。</td>
</tr>
</tbody></table>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token atrule"><span class="token rule">@media</span> 媒体类型</span>
<span class="token punctuation">&#123;</span>
    修改类型
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<hr>
<h2 id="33-属性选择器"><a href="#33-属性选择器" class="headerlink" title="33 属性选择器"></a>33 属性选择器</h2><blockquote>
<p>选择特定属性的标签进行设置</p>
<p>[选择的内容]  {  设置的内容   }</p>
</blockquote>
<table>
<thead>
<tr>
<th>选择器</th>
<th>简介</th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>E[att=”val”]</td>
<td>选择具att属性且属性值为val的E标签</td>
<td></td>
</tr>
<tr>
<td>E[att^=”val”]</td>
<td>选择具att属性且属性值开头为val的E标签</td>
<td></td>
</tr>
<tr>
<td>E[att$=”val”]</td>
<td>选择具att属性且属性值结尾为val的E标签</td>
<td></td>
</tr>
<tr>
<td>E[att*=”val”]</td>
<td>选择具att属性且属性中含有val的E标签</td>
<td></td>
</tr>
<tr>
<td>E[att]</td>
<td>选择具att属性的E标签</td>
<td></td>
</tr>
</tbody></table>
<h3 id="33-1-属性选择器"><a href="#33-1-属性选择器" class="headerlink" title="33.1  属性选择器"></a>33.1  属性选择器</h3><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
[title]     <span class="token comment">/*将含有title属性的标签文本颜色设置成蓝色*/</span>
<span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
  h1[title]     <span class="token comment">/*将含有title属性的h1标签文本颜色设置成蓝色*/</span>
<span class="token punctuation">&#123;</span>
<span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
--------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hello world<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello world<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="33-2-属性和值的选择器"><a href="#33-2-属性和值的选择器" class="headerlink" title="33.2  属性和值的选择器"></a>33.2  属性和值的选择器</h3><blockquote>
<p>选择特定属性和属性值的标签进行设置</p>
<p>[属性=值]  { 设置内容 }</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
[title=value]  <span class="token comment">/*设置含有title属性并且值为value的标签*/</span>
<span class="token punctuation">&#123;</span>
	<span class="token property">border</span><span class="token punctuation">:</span>5px solid green<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
-------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>value<span class="token punctuation">"</span></span><span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>超链接路径<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>key  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="33-3-属性和值的选择器-多值"><a href="#33-3-属性和值的选择器-多值" class="headerlink" title="33.3  属性和值的选择器-多值"></a>33.3  属性和值的选择器-多值</h3><blockquote>
<p>选择特定属性的标签进行设置</p>
<p>[属性~=值]   选择特定属性，且含有特定值</p>
<p>[属性|=值]    选择特定属性，且以特定值开头</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">[title~=hello]</span>  
<span class="token punctuation">&#123;</span>
	<span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span> 
<span class="token selector">[lang|=en]</span>
<span class="token punctuation">&#123;</span>
	<span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
--------------------------------------<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h2 id="34-表单"><a href="#34-表单" class="headerlink" title="34  表单"></a>34  表单</h2><blockquote>
<p>选择特定属性的标签进行设置</p>
<p>input[选择的内容]  {  设置的内容   }</p>
<p><code>input[type=text]</code> - 选取文本输入框</p>
<p><code>input[type=password]</code> - 选择密码的输入框</p>
<p><code>input[type=number]</code> - 选择数字的输入框</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
input[type=<span class="token string">"text"</span>]  <span class="token comment">/*选择表单中的输入文本框*/</span>
<span class="token punctuation">&#123;</span>
	<span class="token property">width</span><span class="token punctuation">:</span>150px<span class="token punctuation">;</span>
	<span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
	<span class="token property">margin-bottom</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span>yellow<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
---------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>values<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="34-1-输入框聚焦"><a href="#34-1-输入框聚焦" class="headerlink" title="34.1 输入框聚焦"></a>34.1 输入框聚焦</h3><blockquote>
<p>输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为 <code>outline: none;</code> 来忽略该效果。</p>
<p>使用 <code>:focus</code> 选择器可以设置输入框在获取焦点时的样式：</p>
<p>transition: 过渡效果的 CSS 属性的名称 1s; 设置过度时间。如果不限定则范围为全部。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">input[type=text]</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 12px 20px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 8px 0<span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #555<span class="token punctuation">;</span>
  
<span class="token punctuation">&#125;</span>
<span class="token selector">input[type=text]:focus</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> lightblue<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
-----------------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input………<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h3 id="34-2-输入框-input-图标"><a href="#34-2-输入框-input-图标" class="headerlink" title="34.2 输入框(input) 图标"></a>34.2 输入框(input) 图标</h3><blockquote>
<p>输入框中添加图标。</p>
<p><code>background-image</code> 属性和用于定位的<code>background-position</code> 属性。注意设置图标的左边距，让图标有一定的空间。</p>
<p>placeholder 属性提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> 
<span class="token selector">input[type=text]</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #ccc<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> <span class="token comment">/*设置边框尖锐度*/</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'https://static.runoob.com/images/mix/searchicon.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">background-position</span><span class="token punctuation">:</span> 10px 10px<span class="token punctuation">;</span>  <span class="token comment">/*设置背景的位置*/</span>
  <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>  <span class="token comment">/*设置背景图不能重复*/</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 12px 20px 12px 40px<span class="token punctuation">;</span>  <span class="token comment">/* 设置左边距，使图片与输入光标有距离*/</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
-----------------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>搜索..<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="34-3-动作相应的输入框"><a href="#34-3-动作相应的输入框" class="headerlink" title="34.3 动作相应的输入框"></a>34.3 动作相应的输入框</h3><blockquote>
<p>使用 <code>:focus</code> 选择器可以设置输入框在获取焦点时的样式：</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> 
<span class="token selector">input[type=text]</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 130px<span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #ccc<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'https://static.runoob.com/images/mix/searchicon.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">background-position</span><span class="token punctuation">:</span> 10px 10px<span class="token punctuation">;</span> 
  <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 12px 20px 12px 40px<span class="token punctuation">;</span>  <span class="token comment">/*设置填充，为背景图片预留出位置*/</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> width 1s ease-in-out<span class="token punctuation">;</span>  <span class="token comment">/*设置宽度过渡的时间为1秒*/</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">input[type=text]:focus</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
-----------------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>搜索..<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>  <span class="token comment">&lt;!--placeholder设置预留提示信息，点击后会消失替换为文本。--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="34-4-textarea文本框样式"><a href="#34-4-textarea文本框样式" class="headerlink" title="34.4 textarea文本框样式"></a>34.4 textarea文本框样式</h3><blockquote>
<p>使用 <code>resize</code> 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。</p>
<p>border-radius: xpx;  设置边框角的尖锐度。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">textarea</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 12px 20px<span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #ccc<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #f8f8f8<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">resize</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>   <span class="token comment">/*设置文本框能否重置*/</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
---------------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span><span class="token punctuation">></span></span>一些文本...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="34-5-下拉菜单（select）样式"><a href="#34-5-下拉菜单（select）样式" class="headerlink" title="34.5 下拉菜单（select）样式"></a>34.5 下拉菜单（select）样式</h3><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> 
<span class="token selector">select</span> <span class="token punctuation">&#123;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 16px 20px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>   <span class="token comment">/*设置边框尖锐度*/</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>country<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>country<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项一<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项二<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="34-6-按钮样式"><a href="#34-6-按钮样式" class="headerlink" title="34.6 按钮样式"></a>34.6 按钮样式</h3><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> 
<span class="token selector">input[type=button], input[type=submit], input[type=reset]</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #4CAF50<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 16px 32px<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 4px 2px<span class="token punctuation">;</span>
  <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>   <span class="token comment">/*设置鼠标接触时光标的变化样式*/</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
----------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>按钮<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重置<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="34-7-去除轮廓线"><a href="#34-7-去除轮廓线" class="headerlink" title="34.7 去除轮廓线"></a>34.7 去除轮廓线</h3><blockquote>
<p>使用 outline 属性去除表单输入文本框默认的蓝色边框</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">input</span> <span class="token punctuation">&#123;</span>
  <span class="token property">outline</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>


</blockquote>
<h3 id="34-8-防止一文本域拖拽"><a href="#34-8-防止一文本域拖拽" class="headerlink" title="34.8 防止一文本域拖拽"></a>34.8 防止一文本域拖拽</h3><blockquote>
<p>使用resize属性设置文本域不能被拖拽</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">textarea</span> <span class="token punctuation">&#123;</span>
  <span class="token property">resize</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>


</blockquote>
<h2 id="35-计时器"><a href="#35-计时器" class="headerlink" title="35 计时器"></a>35 计时器</h2><blockquote>
<p>CSS 计数器通过一个变量来设置，根据规则递增变量。</p>
</blockquote>
<ul>
<li><code>counter-reset</code> - 创建或者重置计数器</li>
<li><code>counter-increment</code> - 递增变量</li>
<li><code>content</code> - 插入生成的内容</li>
<li><code>counter()</code> 或 <code>counters()</code> 函数 - 将计数器的值添加到元素</li>
</ul>
<h3 id="35-1-并列计数器"><a href="#35-1-并列计数器" class="headerlink" title="35.1 并列计数器"></a>35.1 并列计数器</h3><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">body</span> <span class="token punctuation">&#123;</span>
  <span class="token property">counter-reset</span><span class="token punctuation">:</span> 计数器名字<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">h2::before</span> <span class="token punctuation">&#123;</span>
  <span class="token property">counter-increment</span><span class="token punctuation">:</span> 计数器名字<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"前面的元素"</span> <span class="token function">counter</span><span class="token punctuation">(</span>计数器名字<span class="token punctuation">)</span> <span class="token string">":后面的元素"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
---------------------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>第一个<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>第二个<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="35-2-嵌套计数器"><a href="#35-2-嵌套计数器" class="headerlink" title="35.2 嵌套计数器"></a>35.2 嵌套计数器</h3><blockquote>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">body</span> <span class="token punctuation">&#123;</span>
  <span class="token property">counter-reset</span><span class="token punctuation">:</span> section<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">h1</span> <span class="token punctuation">&#123;</span>
  <span class="token property">counter-reset</span><span class="token punctuation">:</span> subsection<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">h1::before</span> <span class="token punctuation">&#123;</span>
  <span class="token property">counter-increment</span><span class="token punctuation">:</span> section<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"前元素 "</span> <span class="token function">counter</span><span class="token punctuation">(</span>section<span class="token punctuation">)</span> <span class="token string">". "</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">h2::before</span> <span class="token punctuation">&#123;</span>
  <span class="token property">counter-increment</span><span class="token punctuation">:</span> subsection<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>section<span class="token punctuation">)</span> <span class="token string">"."</span> <span class="token function">counter</span><span class="token punctuation">(</span>subsection<span class="token punctuation">)</span> <span class="token string">" "</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
-----------------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>大标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>小标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>小标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>大标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>小标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>小标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>大标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>小标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>小标题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h2 id="36-布局"><a href="#36-布局" class="headerlink" title="36 布局"></a>36 布局</h2><blockquote>
<p>网页布局有很多种方式，一般分为以下几个部分：<strong>头部区域、菜单导航区域、内容区域、底部区域</strong>。</p>
</blockquote>
<p><img src="https://www.runoob.com/wp-content/uploads/2019/04/DBD1E737-47C5-445E-BFEC-7547210D88D5.jpg"></p>
<h3 id="36-1-头部"><a href="#36-1-头部" class="headerlink" title="36.1 头部"></a>36.1 头部</h3><blockquote>
<p>头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token comment">/* 头部样式 */</span>
<span class="token selector">.header</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
--------------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>头部区域<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="36-2-导航栏"><a href="#36-2-导航栏" class="headerlink" title="36.2 导航栏"></a>36.2 导航栏</h3><blockquote>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">*</span> <span class="token punctuation">&#123;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">body</span> <span class="token punctuation">&#123;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">/* 头部样式 */</span>
<span class="token selector">.header</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">/* 导航条 */</span>
<span class="token selector">.topnav</span> <span class="token punctuation">&#123;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
 
<span class="token comment">/* 导航链接 */</span>
<span class="token selector">.topnav a</span> <span class="token punctuation">&#123;</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #f2f2f2<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 14px 16px<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
 
<span class="token comment">/* 链接 - 修改颜色 */</span>
<span class="token selector">.topnav a:hover</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
---------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>头部区域<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>topnav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>链接<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>链接<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>链接<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="36-3-内容"><a href="#36-3-内容" class="headerlink" title="36.3 内容"></a>36.3 内容</h3><blockquote>
<ul>
<li><strong>1 列</strong>：一般用于移动端</li>
<li><strong>2 列</strong>：一般用于平板设备</li>
<li><strong>3 列</strong>：一般用于 PC 桌面设备</li>
</ul>
</blockquote>
<p><img src="https://www.runoob.com/wp-content/uploads/2019/04/D105F34E-6592-47AC-A9DF-EEDC1E2172B3.jpg"></p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token comment">/* 创建三个相等的列 */</span>
<span class="token selector">.column</span> <span class="token punctuation">&#123;</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 33.33%<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span> 
<span class="token comment">/* 列后清除浮动 */</span>
<span class="token selector">.row:after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">/* 响应式布局 - 小于 600 px 时改为上下布局 */</span>
<span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
  <span class="token selector">.column</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
---------------------------------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>第一列<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>文本信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>第二列<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>文本信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>column<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>第三列<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>文本信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="36-4-底部内容"><a href="#36-4-底部内容" class="headerlink" title="36.4  底部内容"></a>36.4  底部内容</h4><blockquote>
<p>底部区域在网页的最下方，一般包含版权信息和联系方式等。</p>
</blockquote>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token comment">/* 底部样式 */</span>
<span class="token selector">.footer</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
---------------------------------------
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>底部区域<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="37-用户界面优化"><a href="#37-用户界面优化" class="headerlink" title="37 用户界面优化"></a>37 用户界面优化</h2><h3 id="37-1-鼠标图标的变化。"><a href="#37-1-鼠标图标的变化。" class="headerlink" title="37.1 鼠标图标的变化。"></a>37.1 鼠标图标的变化。</h3><blockquote>
<p>通过设置cursor:属性来更改在对象上移动鼠标指针采用何种系统定义的光标形状。</p>
</blockquote>
<table>
<thead>
<tr>
<th>属性值</th>
<th>描述</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>default</td>
<td>小白 默认</td>
<td></td>
</tr>
<tr>
<td>pointer</td>
<td>小手</td>
<td></td>
</tr>
<tr>
<td>move</td>
<td>移动</td>
<td></td>
</tr>
<tr>
<td>text</td>
<td>文本</td>
<td></td>
</tr>
<tr>
<td>not-allowed</td>
<td>禁止</td>
<td></td>
</tr>
</tbody></table>
<h3 id="37-2-溢出文字省略号显示"><a href="#37-2-溢出文字省略号显示" class="headerlink" title="37.2 溢出文字省略号显示"></a>37.2 溢出文字省略号显示</h3><blockquote>
<p>设置盒子中的文字如果溢出，将以省略号的形式显示。</p>
</blockquote>
<h4 id="1-单行文本溢出"><a href="#1-单行文本溢出" class="headerlink" title="1.单行文本溢出"></a>1.单行文本溢出</h4><blockquote>
<ol>
<li>先强制一行内显示文本  2.  超出部分隐藏  3.文字用省略号替代超出的部分。</li>
</ol>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token punctuation">&#123;</span>
    <span class="token property">white-space</span><span class="token punctuation">:</span>nowrap<span class="token punctuation">;</span>   //先强制一行内显示文本
    <span class="token property">overflow</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span>     //超出部分隐藏
    <span class="token property">text-overflow</span><span class="token punctuation">:</span>ellipsis<span class="token punctuation">;</span>    //文字用省略号替代超出的部分
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>owrap</td>
<td>强制一行内显示文本</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody></table>
<h4 id="2-多行文本溢出"><a href="#2-多行文本溢出" class="headerlink" title="2.多行文本溢出"></a>2.多行文本溢出</h4><h3 id="37-2-网站-favicon-图标："><a href="#37-2-网站-favicon-图标：" class="headerlink" title="37.2 网站 favicon 图标："></a>37.2 网站 favicon 图标：</h3><blockquote>
<p>favicon 图标是显示在页面标签旁的图标，必须使用 文件名.ioc 格式的图片充当。</p>
</blockquote>
<p>创建步骤：</p>
<ol>
<li>制作favicon图标</li>
<li>将favicon图标放置到网站的根目录下</li>
<li>html页面引入favicon图标 &lt;link rel=”shortcut icon” href=” /favicon.ico” /&gt;</li>
</ol>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zh-CN<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>网页练习<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!-- 引入favicon图标 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shortcut icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span> /favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
    <span class="token comment">&lt;!-- 引入初始化文件 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/bace.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!-- 引入公共css文件 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/common.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>







<h2 id="38-css文本初始化"><a href="#38-css文本初始化" class="headerlink" title="38 css文本初始化"></a>38 css文本初始化</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">*</span> <span class="token punctuation">&#123;</span>  // 设置所有盒子的外边距和内填充为0
    <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">em,i</span> <span class="token punctuation">&#123;</span> //设置em和i标签字体样式正常
    <span class="token property">font-size</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">li</span> <span class="token punctuation">&#123;</span> //设置列表没有开头的小圆点
    <span class="token property">list-style</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">img</span> <span class="token punctuation">&#123;</span>  //设置图片无边框<span class="token punctuation">(</span>照顾低版本浏览器<span class="token punctuation">)</span>，设置图片下方对齐，不会留缝隙
    <span class="token property">border</span><span class="token punctuation">:</span>0 <span class="token punctuation">;</span>
    <span class="token property">vertical-align</span><span class="token punctuation">:</span>middle<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span> 

<span class="token selector">button</span> <span class="token punctuation">&#123;</span> //设置鼠标移动到按钮上显示为小手
    <span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
    
<span class="token selector">.clearfix:after</span> <span class="token punctuation">&#123;</span>
    <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
    <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">'.'</span><span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h1 id="emmet语法"><a href="#emmet语法" class="headerlink" title="emmet语法"></a>emmet语法</h1><blockquote>
<p>Emmet语法的前身是Zen coding,它使用缩写来提高编写速度，Vscode内部已经集成该语法。</p>
<p>1.快速生成HTML结构语法</p>
<p>2.快速生成CSS样式语法</p>
</blockquote>
<h2 id="1-快速生成html结构语法"><a href="#1-快速生成html结构语法" class="headerlink" title="1. 快速生成html结构语法"></a>1. 快速生成html结构语法</h2><ol>
<li><p>生成标签，直接输入标签名，按tab键即可，比如 div 然后tab键，就可以生成&lt;div&gt;&lt;/div&gt;。</p>
</li>
<li><p>如果想要生成多个相同标签，加上*就可以了比如 div*3 就可以快速生成&lt;div&gt;&lt;/div&gt;.</p>
</li>
<li><p>如果有父子级关系的标签，可以用&gt;比如ul&gt;li就可以了。</p>
</li>
<li><p>如果有兄弟关系的标签，用 + 就可以了。</p>
</li>
<li><p>如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了。</p>
</li>
<li><p>如果生成的div类名是有顺序的，可以用自增符号$。</p>
</li>
</ol>
<h2 id="2-快速生成css样式"><a href="#2-快速生成css样式" class="headerlink" title="2 快速生成css样式"></a>2 快速生成css样式</h2><ol>
<li>采取简写形式就可以生成css样式。</li>
<li>比如w200 按tab可以生成 width:200px；</li>
</ol>
<h1 id="css3新特性"><a href="#css3新特性" class="headerlink" title="css3新特性"></a>css3新特性</h1><h2 id="新增的选择器"><a href="#新增的选择器" class="headerlink" title="新增的选择器"></a>新增的选择器</h2><blockquote>
<p>新增的css3新特性有兼容性问题，在IE9之后才支持。</p>
<p>移动端支持要优于pc端。</p>
<ul>
<li>属性选择</li>
<li>结构伪类选择器</li>
<li>伪元素选择器</li>
</ul>
</blockquote>
<h3 id="1-属性选择器"><a href="#1-属性选择器" class="headerlink" title="1. 属性选择器"></a>1. 属性选择器</h3><blockquote>
<p>属性选择器可以根据 元素的特定属性来选择元素。</p>
<p>属性选择器和伪类选择器的权重都是10。</p>
</blockquote>
<table>
<thead>
<tr>
<th>选择符</th>
<th>简介</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>E[att]</td>
<td>选择具有att属性的E元素</td>
<td></td>
</tr>
<tr>
<td>E[att=”val”]</td>
<td>选择具有att属性且属性值等于val的E元素</td>
<td></td>
</tr>
<tr>
<td>E[att^=”val”]</td>
<td>选择具有att属性且属性值以val开头的E元素</td>
<td></td>
</tr>
<tr>
<td>E[att$=”val”]</td>
<td>选择具有att属性且属性值以val结尾的E元素</td>
<td></td>
</tr>
<tr>
<td>E[att*=”val”]</td>
<td>选择具有att属性且属性值中有val的E元素</td>
<td></td>
</tr>
</tbody></table>
<h3 id="2-结构伪类选择器"><a href="#2-结构伪类选择器" class="headerlink" title="2.结构伪类选择器"></a>2.结构伪类选择器</h3><blockquote>
<p>结构伪类选择器主要是根据文档结构来选择元素，作用于父类</p>
</blockquote>
<table>
<thead>
<tr>
<th>选择符</th>
<th>介绍</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>E:first-child</td>
<td>匹配父元素中的第一个子元素E</td>
<td></td>
</tr>
<tr>
<td>E:last-child</td>
<td>匹配父元素中的最后一个E元素</td>
<td></td>
</tr>
<tr>
<td>E:nth-child(n)</td>
<td>匹配父元素中的第n个子元素E</td>
<td>even：选择偶数 odd：选择奇数</td>
</tr>
<tr>
<td>E:fitst-of-type</td>
<td>指定类型E的第一个</td>
<td></td>
</tr>
<tr>
<td>E:last-of-type</td>
<td>指定类型E的最后一个</td>
<td></td>
</tr>
<tr>
<td>E:nth-of-type(n)</td>
<td>指定类型E的第n个</td>
<td></td>
</tr>
</tbody></table>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">ul li:frist-child</span> <span class="token punctuation">&#123;</span>  <span class="token punctuation">&#125;</span>      <span class="token selector">//选择ul标签中的第一个li标签
ul li:last-child</span> <span class="token punctuation">&#123;</span>  <span class="token punctuation">&#125;</span>  		<span class="token selector">//选择ul标签中的最后一个li标签
ul li:nth-child(n)</span>  <span class="token punctuation">&#123;</span>  <span class="token punctuation">&#125;</span>		//选择ul标签中的指定第n个li标签<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p>nth-child(n) 选择父元素的一个或者对各特定的子元素</p>
<blockquote>
<p>执行的时候是会把所有的盒子都排列序号，先查看第几个盒子，在匹配标签名。</p>
</blockquote>
<blockquote>
<ul>
<li>n 可以是数字，关键字和公式。</li>
<li>n 是数字，就是选择第n个子元素，里面数字从1开始……</li>
<li>n 是关键字 even 偶数, odd 奇数。</li>
<li>n 可以是公式：常见公式如下：</li>
</ul>
</blockquote>
<table>
<thead>
<tr>
<th>公式</th>
<th>取值</th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>2n</td>
<td>偶数</td>
<td></td>
</tr>
<tr>
<td>2n+1</td>
<td>奇数</td>
<td></td>
</tr>
<tr>
<td>5n</td>
<td>5 10 15……</td>
<td></td>
</tr>
<tr>
<td>n+5</td>
<td>从第5个开始包含第五个</td>
<td></td>
</tr>
<tr>
<td>-n+5</td>
<td>前五个，包含第五个</td>
<td></td>
</tr>
</tbody></table>
<p>nth-of-type(n)</p>
<blockquote>
<p>先会找到指定的标签，然后把指定的标签排列，选中指定的盒子。</p>
</blockquote>
<h3 id="3-伪元素选择器"><a href="#3-伪元素选择器" class="headerlink" title="3.伪元素选择器"></a>3.伪元素选择器</h3><blockquote>
<p>伪元素选择器可以利用css来创建新的标签，而不需要html标签，从而简化html结构。</p>
<p>创建的元素属于行内元素，在html中找不到相应的元素，并不是一个真正的元素。所以称之为伪元素。</p>
<p>行内元素无法更改大小，只能先转换为行内块元素或者块元素才能设置大小。</p>
<p>伪元素选择器是放置在父元素的相应位置。</p>
<p>必须要有contcent属性，否则没有任何效果。</p>
</blockquote>
<table>
<thead>
<tr>
<th>选择符</th>
<th>介绍</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>::before</td>
<td>在元素的内部的前面插入内容</td>
<td></td>
</tr>
<tr>
<td>::after</td>
<td>在元素的内部的后面插入内容</td>
<td></td>
</tr>
</tbody></table>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">E::after</span> <span class="token punctuation">&#123;</span>
    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">""</span><span class="token punctuation">;</span>              //伪元素选择器必须要存在contebt属性
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>



<h4 id="伪元素清除浮动"><a href="#伪元素清除浮动" class="headerlink" title="伪元素清除浮动"></a>伪元素清除浮动</h4><blockquote>
<p>清除浮动的原理：在浮动的盒子后面再插入一个盒子来当墙阻挡浮动。</p>
<p>伪元素清除浮动的原理：在浮动的盒子后面添加一个伪元素，来充当墙阻挡浮动。</p>
<p>充当墙的盒子必须为块级元素。</p>
</blockquote>
<p>语法：</p>
<p>1.</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.clearfix:after</span> <span class="token punctuation">&#123;</span>
    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">""</span><span class="token punctuation">;</span>    //伪元素必须有此元素
    <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>    //转换为块级元素
    <span class="token property">height</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>			//高度设为0
    <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span>          //清除浮动
    <span class="token property">visibility</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span>     //隐藏此元素
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>2.</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.clearfix:before,.claerfix:after</span> <span class="token punctuation">&#123;</span>
    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">""</span><span class="token punctuation">;</span>      //必要属性
    <span class="token property">display</span><span class="token punctuation">:</span>table<span class="token punctuation">;</span>   //转换为块元素，且在一行显示
<span class="token punctuation">&#125;</span>
<span class="token selector">.clearfix:after</span> <span class="token punctuation">&#123;</span>
    <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span>  //清除浮动
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<h2 id="新增的盒子模型"><a href="#新增的盒子模型" class="headerlink" title="新增的盒子模型"></a>新增的盒子模型</h2><blockquote>
<p>css3可以通过指定box-sizing 来指定和模型，有两个值可以指定：</p>
<p>box-sizing:content-box ：盒子大小为 width + padding + border （默认的）</p>
<p>box-sizing:border-box :  盒子大小为width</p>
<p>如果盒子模型改成了box-sizing：border-box ，<code>那padding和border就不会撑大盒子（</code>前提是padding和border不会超过width的宽度）</p>
</blockquote>
<p>常用于设置全局属性中：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">*</span> <span class="token punctuation">&#123;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
    <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h2 id="图片滤镜filter"><a href="#图片滤镜filter" class="headerlink" title="图片滤镜filter"></a>图片滤镜filter</h2><blockquote>
<p>filter css属性将模糊或者颜色变化等图形效果应用于元素，也可以调整图片红蓝比。</p>
</blockquote>
<blockquote>
<p>filter: 函数()；  例如：filter:blur(5px);   blur模糊处理。数值越大越模糊。</p>
</blockquote>
<p>filter函数：</p>
<table>
<thead>
<tr>
<th align="left">Filter</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">none</td>
<td align="left">默认值，没有效果。</td>
</tr>
<tr>
<td align="left">blur(<em>px</em>)</td>
<td align="left">给图像设置高斯模糊。”radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；  如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。</td>
</tr>
<tr>
<td align="left">brightness(<em>%</em>)</td>
<td align="left">给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。</td>
</tr>
<tr>
<td align="left">contrast(<em>%</em>)</td>
<td align="left">调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。</td>
</tr>
<tr>
<td align="left">drop-shadow(<em>h-shadow v-shadow blur spread color</em>)</td>
<td align="left">给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值，除了”inset”关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<code>&lt;shadow&gt;参数如下：``**&lt;offset-x&gt;** **&lt;offset-y&gt;** (必须)这是设置阴影偏移量的两个 &lt;length&gt;值. **&lt;offset-x&gt;** 设定水平方向距离. 负值会使阴影出现在元素左边. **&lt;offset-y&gt;**设定垂直距离.负值会使阴影出现在元素上方。查看**&lt;length&gt;**可能的单位.**如果两个值都是0**, 则阴影出现在元素正后面 (如果设置了 &lt;blur-radius&gt; and/or &lt;spread-radius&gt;，会有模糊效果).**&lt;blur-radius&gt;** (可选)这是第三个code&gt;&lt;length&gt;值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).**&lt;spread-radius&gt;** (可选)这是第四个 &lt;length&gt;值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。 **&lt;color&gt;** (可选)查看 &lt;color&gt;该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用color**color**属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。</code></td>
</tr>
<tr>
<td align="left">grayscale(<em>%</em>)</td>
<td align="left">将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；</td>
</tr>
<tr>
<td align="left">hue-rotate(<em>deg</em>)</td>
<td align="left">给图像应用色相旋转。”angle”一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。</td>
</tr>
<tr>
<td align="left">invert(<em>%</em>)</td>
<td align="left">反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。</td>
</tr>
<tr>
<td align="left">opacity(<em>%</em>)</td>
<td align="left">转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。</td>
</tr>
<tr>
<td align="left">saturate(<em>%</em>)</td>
<td align="left">转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。</td>
</tr>
<tr>
<td align="left">sepia(<em>%</em>)</td>
<td align="left">将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；</td>
</tr>
<tr>
<td align="left">url()</td>
<td align="left">URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：<code>filter: url(svg-url#element-id)</code></td>
</tr>
<tr>
<td align="left">initial</td>
<td align="left">设置属性为默认值</td>
</tr>
<tr>
<td align="left">inherit</td>
<td align="left">从父元素继承该属性</td>
</tr>
</tbody></table>
<h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><blockquote>
<p>calc()此css函数可以允许声明css属性时执行一些计算</p>
<p>例如：  width：calc(100% - 80px)   //括号中可以使用 + - * / 来进行计算*</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">E</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 80px<span class="token punctuation">)</span><span class="token punctuation">;</span>   //比父盒子小80像素
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>



<h2 id="过渡"><a href="#过渡" class="headerlink" title="过渡"></a>过渡</h2><blockquote>
<p>过度可以不适用Flash动画和javasc的情况下，当元素从一种样式变换为零一种样式时为元素添加效果。</p>
<p>过渡动画：从一种状态渐渐过渡到另一种状态</p>
<p>经常和 :hover一起搭配使用。</p>
</blockquote>
<blockquote>
<p>语法： transition: 要过渡的属性 花费时间 运动曲线 延迟时间</p>
<p>有多个要过渡的属性时： transition: 属性一 延迟时间，属性二 延迟时间；</p>
<ul>
<li>属性：想要变化的css样式，宽度高度，背景颜色内外边距，如果所有属性都有变化过渡，写：all。</li>
<li>花费时间：必须写单位，单位是(s)秒,</li>
<li>运动曲线：默认是ease；</li>
<li>延迟时间：单位是s(秒)，可以设置延迟触发的时间。</li>
</ul>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">E</span> <span class="token punctuation">&#123;</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> 要过度属性 花费时间 运动曲线 何时开始   //过渡控制给元素加
<span class="token punctuation">&#125;</span>
<span class="token selector">E</span> <span class="token punctuation">&#123;</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> width 1s<span class="token punctuation">,</span>height 1s<span class="token punctuation">;</span>   //过渡控制给元素加
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>





<p>过渡的运动曲线：</p>
<table>
<thead>
<tr>
<th align="left">值</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">linear</td>
<td align="left">规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。</td>
</tr>
<tr>
<td align="left">ease</td>
<td align="left">规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。</td>
</tr>
<tr>
<td align="left">ease-in</td>
<td align="left">规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。</td>
</tr>
<tr>
<td align="left">ease-out</td>
<td align="left">规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。</td>
</tr>
<tr>
<td align="left">ease-in-out</td>
<td align="left">规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。</td>
</tr>
<tr>
<td align="left">cubic-bezier(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td>
<td align="left">在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</td>
</tr>
</tbody></table>
<p>贝塞尔曲线:</p>
<blockquote>
<p>图片斜率就是速度(大概吧，不是很确定)，p1,p2就是控制点。</p>
</blockquote>
<p><img src="https://img-blog.csdn.net/20171213181125110?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2puZjAxMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast"></p>
<h2 id="2D转换-transform"><a href="#2D转换-transform" class="headerlink" title="2D转换 transform"></a>2D转换 transform</h2><blockquote>
<p>转换时css3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果。</p>
<p>2d转换不会影响其他元素。</p>
<ul>
<li>移动：translate</li>
<li>旋转：rotate</li>
<li>缩放：scale</li>
</ul>
</blockquote>
<h3 id="移动：translate"><a href="#移动：translate" class="headerlink" title="移动：translate"></a>移动：translate</h3><blockquote>
<p>2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置。类似定位。</p>
<ul>
<li>定义2D转换中的移动，沿着X轴和Y轴方向移动。</li>
<li>最大的优点：==不会影响到其他元素位置。==</li>
<li>translate中的百分比单位是相对于自身元素的translate:(50px,50px)</li>
<li>==对行内标签没有效果。==</li>
</ul>
</blockquote>
<p>​         </p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">E</span> <span class="token punctuation">&#123;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span>  或者分开写：
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h4 id="简单的居中对齐"><a href="#简单的居中对齐" class="headerlink" title="简单的居中对齐"></a>简单的居中对齐</h4><blockquote>
<p>可以通过先设置定位(position:absolute)来设置盒子位置近似于居中。</p>
<ol>
<li><p>方法一：设置margin-top：(50%)盒子宽度; margin-left: (50%)盒子宽度;</p>
</li>
<li><p>方法二：设置transform: translate:(-50%,-50%); //盒子往上左走盒子宽度的50%。</p>
<p>来设置盒子的居中。 </p>
</li>
</ol>
</blockquote>
<h3 id="旋转：-rotate"><a href="#旋转：-rotate" class="headerlink" title="旋转： rotate"></a>旋转： rotate</h3><blockquote>
<p>2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。 </p>
<ul>
<li>rotate里面跟度数，单位是deg       rotate(45deg);</li>
<li>角度为正时，顺时针，为负时，为逆时针。</li>
<li><code>默认旋转的中心点时元素的中心点。</code></li>
</ul>
</blockquote>
<p>语法：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">E</span> <span class="token punctuation">&#123;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span> 度数deg <span class="token punctuation">)</span><span class="token punctuation">;</span>    //这个度数是旋转到的度数，不是旋转了多少度。
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h4 id="设置旋转中心"><a href="#设置旋转中心" class="headerlink" title="设置旋转中心"></a>设置旋转中心</h4><blockquote>
<p>可以设置元素的旋转中心：</p>
<p>​    transform-origin: x y ;</p>
<p>后面的参数可以是百分比，也可以是： (top，bottom，left，right， center)等方位词，也可以是像素。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css">
<span class="token selector">.left-top</span> <span class="token punctuation">&#123;</span>
       <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
       <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
       <span class="token property">background-color</span><span class="token punctuation">:</span>blueviolet<span class="token punctuation">;</span>
       <span class="token property">margin</span><span class="token punctuation">:</span> 200px auto<span class="token punctuation">;</span>
       <span class="token property">transform-origin</span><span class="token punctuation">:</span> left bottom<span class="token punctuation">;</span>   //设置旋转的中心点
       <span class="token property">transition</span><span class="token punctuation">:</span> all 3s<span class="token punctuation">;</span>				//设置过渡
   <span class="token punctuation">&#125;</span>
   <span class="token selector">.left-top:hover</span> <span class="token punctuation">&#123;</span>
       <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>3600deg<span class="token punctuation">)</span><span class="token punctuation">;</span>     //开始旋转
       <span class="token property">background-color</span><span class="token punctuation">:</span><span class="token function">rgb</span><span class="token punctuation">(</span>186<span class="token punctuation">,</span> 226<span class="token punctuation">,</span> 43<span class="token punctuation">)</span><span class="token punctuation">;</span>   
       <span class="token property">border-radius</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
   <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="缩放：scale"><a href="#缩放：scale" class="headerlink" title="缩放：scale"></a>缩放：scale</h3><blockquote>
<p>可以通过scale属性来设置缩小放大的倍数。</p>
<p>使用 transform:scale(); 不会影响其他的盒子，使用height，width改变大小会影响其他的盒子。</p>
<p>transform:scale(x ,y);  x是宽度,y是高度，调整为原来的倍数。</p>
<p>x,y 如果是整数就是放大盒子，如果是小数就是缩小盒子。</p>
<p>如果是等比例缩放，可以只填写一个数字。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.scale</span> <span class="token punctuation">&#123;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 200px auto<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span>
        <span class="token property">transition</span><span class="token punctuation">:</span> all 1s<span class="token punctuation">;</span>   //过渡
    <span class="token punctuation">&#125;</span>
    <span class="token selector">.scale:hover</span> <span class="token punctuation">&#123;</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>3<span class="token punctuation">)</span><span class="token punctuation">;</span>   //设置缩放的倍数
        <span class="token property">background-color</span><span class="token punctuation">:</span>chartreuse<span class="token punctuation">;</span>    
    <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="综合写法："><a href="#综合写法：" class="headerlink" title="综合写法："></a>综合写法：</h3><blockquote>
<p>使用多个转换时，其格式为： transform: translate() rotate() scale() ……等。</p>
<p>不能同时使用多个transform:属性，只会执行最下面的一个。(尝试结论)</p>
<p>==不同的排列顺序会影响转换的效果。(最好是先改变位置在改变其他属性)==</p>
<p>当同时有位移和其他属性时，<code>最好将位移放置到最前面。</code>（除非需要先旋转再位移。）</p>
</blockquote>
<h2 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h2><blockquote>
<p>  动画(animation)是css3中 具有颠覆性的特征之一，可以通过多个节点来精确控制一个或者是一组动画，常用来实现复杂的动画效果。</p>
<p>  相比于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。</p>
<ul>
<li>制作动画分为两步：</li>
</ul>
<ol>
<li>先定义动画</li>
<li>使用(调用)动画</li>
</ol>
</blockquote>
<h3 id="1-使用动画步骤："><a href="#1-使用动画步骤：" class="headerlink" title="1. 使用动画步骤："></a>1. 使用动画步骤：</h3><blockquote>
<p>0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。</p>
<p>在@keyframes中规定了某项css样式，就能创建由当前样式逐渐改为动画效果。</p>
<p>动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多次数。</p>
<p>可以使用百分比来规定时间，或者使用关键词From和To等同于0%和100%。</p>
<p>百分比是给设定的动画总时间划分大小。</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css">
<span class="token comment">/*定义动画关键帧*/</span>
<span class="token atrule"><span class="token rule">@keyframes</span> 动画名称</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">0%</span> <span class="token punctuation">&#123;</span>
        开始动画的样式<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    <span class="token selector">100%</span> <span class="token punctuation">&#123;</span>
        结束动画的样式<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">/*调用动画*/</span>
<span class="token selector">E</span> <span class="token punctuation">&#123;</span>
    <span class="token comment">/*调用动画*/</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> 动画名<span class="token punctuation">;</span>
    <span class="token comment">/*持续时间*/</span>
    <span class="token property">animation-duration</span><span class="token punctuation">:</span> 持续时间<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="2-常用属性表"><a href="#2-常用属性表" class="headerlink" title="2. 常用属性表"></a>2. 常用属性表</h3><table>
<thead>
<tr>
<th align="left">值</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">animation-name</td>
<td align="left">指定要绑定到选择器的关键帧的名称</td>
</tr>
<tr>
<td align="left">animation-duration</td>
<td align="left">动画指定需要多少秒或毫秒完成</td>
</tr>
<tr>
<td align="left">animation-timing-function</td>
<td align="left">设置动画运行曲线。默认为：ease;</td>
</tr>
<tr>
<td align="left">animation-delay</td>
<td align="left">设置动画在启动前的延迟间隔。</td>
</tr>
<tr>
<td align="left">animation-iteration-count</td>
<td align="left">定义动画的播放次数。无限循环为： infinite</td>
</tr>
<tr>
<td align="left">animation-direction</td>
<td align="left">指定是否应该轮流反向播放动画。</td>
</tr>
<tr>
<td align="left">animation-fill-mode</td>
<td align="left">规定动画结束后的状态。保持结束状态：forwards ,回到起始状态： backwards。</td>
</tr>
<tr>
<td align="left">animation-play-state</td>
<td align="left">指定动画是否正在运行或已暂停。 running和pause。</td>
</tr>
<tr>
<td align="left">initial</td>
<td align="left">设置属性为其默认值。</td>
</tr>
<tr>
<td align="left">inherit</td>
<td align="left">从父元素继承属性。</td>
</tr>
</tbody></table>
<h3 id="3-animation-timing-function"><a href="#3-animation-timing-function" class="headerlink" title="3. animation-timing-function"></a>3. animation-timing-function</h3><blockquote>
<p>设置动画运行的动作曲线：</p>
</blockquote>
<p>linear：动画从头到尾的速度是相同的</p>
<p>ease ：动画以低速开始，然后加快，在结束前变慢。默认值</p>
<p>ease-in：动画以低速开始</p>
<p>ease-out：动画以低速结束</p>
<p>ease-in-out：动画以低速开始和结束</p>
<p>cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</p>
<h3 id="4-animation-iteration-count"><a href="#4-animation-iteration-count" class="headerlink" title="4. animation-iteration-count"></a>4. animation-iteration-count</h3><blockquote>
<p>设置动画运行的次数</p>
</blockquote>
<p>n：设置一个数字来定义应该播放多少次动画 </p>
<p>infinite ：指定动画播放无限次</p>
<h3 id="5-animation-direction"><a href="#5-animation-direction" class="headerlink" title="5. animation-direction"></a>5. animation-direction</h3><blockquote>
<p>animation-direction 属性定义是否循环交替反向播放动画。</p>
<p>注意：如果动画被设置为只播放一次，该属性将不起作用</p>
</blockquote>
<p>normal ：默认值。动画按正常播放  </p>
<p>reverse：动画反向播放</p>
<p>alternate ：动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放（轮回）</p>
<p>alternate-reverse：动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放  </p>
<p>initial：设置该属性为它的默认值</p>
<p>inherit：从父元素继承该属性</p>
<h3 id="6-animation-fill-mode"><a href="#6-animation-fill-mode" class="headerlink" title="6. animation-fill-mode"></a>6. animation-fill-mode</h3><blockquote>
<p>animation-fill-mode 属性规定当动画不播放时要应用到元素的样式。</p>
</blockquote>
<p>none ：动画在动画执行之前和之后不会应用任何样式到目标元素，默认值  </p>
<p>forwards：停留在结束位置</p>
<p>backwards：返回起始位置。 </p>
<p>both：动画遵循 forwards 和 backwards 的规则。换句话说，动画会在两个方向上扩展动画属性 </p>
<p>initial：设置该属性为它的默认值</p>
<p>inherit：从父元素继承该属性</p>
<h3 id="7-animation-play-state"><a href="#7-animation-play-state" class="headerlink" title="7. animation-play-state"></a>7. animation-play-state</h3><blockquote>
<p>animation–play-state属性可以指定动画是否正在运行或已暂停。</p>
</blockquote>
<p>paused ：指定暂停动画</p>
<p>running：指定正在运行的动画  </p>
<h3 id="8-animation-简写"><a href="#8-animation-简写" class="headerlink" title="8. animation 简写"></a>8. animation 简写</h3><blockquote>
<p>animetion可以使用简写属性：</p>
<p>语法：</p>
<p>​    animation：动画名称 持续时间 运动曲线  何时开始 播放次数  是否反方向 动画或者结束的状态</p>
<ul>
<li><p>简写属性不包含 animation-play-state。</p>
</li>
<li><p>暂停动画： animation-play-state:puased; 经常和鼠标经过等其他配合使用。</p>
</li>
<li><p>要想动画正向播放后再反向播放回起始位置，需要： animation-direction : alyernate;</p>
</li>
<li><p>盒子动画结束后，停在结束位置： animation-fill-mode : forwards;</p>
</li>
</ul>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">E</span> <span class="token punctuation">&#123;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span> animationName 5s linear 2s indinite alternate<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>





<h2 id="3D-转换-transform"><a href="#3D-转换-transform" class="headerlink" title="3D 转换 transform"></a>3D 转换 transform</h2><h3 id="6-1-三位坐标系"><a href="#6-1-三位坐标系" class="headerlink" title="6.1 三位坐标系"></a>6.1 三位坐标系</h3><blockquote>
<p>三维坐标系就是指立体空间，立体空间是由三个轴共同组成。</p>
<ul>
<li>x轴：水平向右  </li>
<li>y轴：垂直向下</li>
<li>z轴：垂直向屏幕外</li>
</ul>
</blockquote>
<h3 id="3D-移动-translate3d"><a href="#3D-移动-translate3d" class="headerlink" title="3D 移动 translate3d"></a>3D 移动 translate3d</h3><blockquote>
<p>3D移动再2D移动的基础上多增加了一个可以移动的方向，就是z轴的方向。</p>
<ul>
<li>transform:translateX( px ): 仅仅是在x轴上移动。</li>
<li>transform:translateY( px ): 仅仅是在Y轴上移动。</li>
<li>transform:translateZ( px ): 仅仅是在Z轴上移动。(一般单位就是px，且x,y,x不能省略)</li>
<li>transform:translate( x,y,z ):  其中x,y,z是要指定的移动的方向。</li>
</ul>
</blockquote>
<h3 id="透视-perspective"><a href="#透视-perspective" class="headerlink" title="透视 perspective"></a>透视 perspective</h3><blockquote>
<p>在2D平面产生近大远小视觉立体，但是只是效果二维的。</p>
<ul>
<li>想要在网页中产生3D效果需要透视(理解成3D物体投影到2D平面内);</li>
<li>透视也被称为视距，视距就是人眼睛到屏幕的距离。</li>
<li>距离视觉点越近的在电脑平面成像越大，越远成像越小。</li>
<li>透视的单位是像素。</li>
</ul>
</blockquote>
<blockquote>
<p>==透视写在被观察元素的父盒子上面==</p>
<p>d: 视距，视距就是人的眼睛到屏幕的距离。</p>
<p>z: 就是z轴。物体距离屏幕的距离，z轴越大，看到的物体就越大。</p>
</blockquote>
<p><img src="https://www.hualigs.cn/image/60841527ee335.jpg"></p>
<h3 id="3D-旋转-rotate3D"><a href="#3D-旋转-rotate3D" class="headerlink" title="3D 旋转 rotate3D"></a>3D 旋转 rotate3D</h3><blockquote>
<p>3D旋转可以让元素在三维平面内沿着x轴y轴z轴或这自定义的轴进行旋转。</p>
<p>语法：</p>
<ul>
<li>transform:rotateX( deg ): 沿着X轴旋转相应的度数。</li>
<li>transform:rotateY( deg ): 沿着Y轴旋转相应的度数。</li>
<li>transform:rotateZ( deg ): 沿着Z轴旋转相应的度数。</li>
<li>transform:rotate3d( x,y,z, deg ): 沿着矢量轴旋转相应的度数。</li>
<li>xyz表示的是旋转轴的矢量。</li>
<li>旋转的正方向遵循左手法则。</li>
</ul>
</blockquote>
<h3 id="3D呈现-transform-style"><a href="#3D呈现-transform-style" class="headerlink" title="3D呈现 transform-style"></a>3D呈现 transform-style</h3><blockquote>
<ul>
<li>控制子元素是否开启三维立体环境。</li>
<li>transform-style: flat 子元素不开启3D立体空间，默认的。</li>
<li>transform-style: preserve-3d; 子元素开启立体空间。</li>
<li>代码写给父级元素，影响的是子盒子。</li>
</ul>
</blockquote>
<h3 id="浏览器私有前缀"><a href="#浏览器私有前缀" class="headerlink" title="浏览器私有前缀"></a>浏览器私有前缀</h3><blockquote>
<p>浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。</p>
<ul>
<li>-moz-  :  代表firefox 浏览器私有属性。</li>
<li>-ms-  :  代表ie浏览器的私有属性。</li>
<li>-webkit-  :  代表safari,chrome私有属性。</li>
<li>-o-  ： 代表Opera 私有属性。</li>
</ul>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token property">-moz-border-radius</span> <span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">-webkit-border-radius</span> <span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">-ms-border-radius</span>  <span class="token punctuation">:</span>  10px<span class="token punctuation">;</span>
<span class="token property">-o-border-radius</span>  <span class="token punctuation">:</span>  10px<span class="token punctuation">;</span>
<span class="token property">border-redius</span>  <span class="token punctuation">:</span>  10px<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h2 id="渐变"><a href="#渐变" class="headerlink" title="渐变"></a>渐变</h2><blockquote>
<p>可以控制颜色渐变</p>
</blockquote>
<h3 id="线性渐变"><a href="#线性渐变" class="headerlink" title="线性渐变"></a>线性渐变</h3><blockquote>
<p>控制颜色在线性方向的渐变。</p>
<p>语法：</p>
<p>​    linear-gradient(起始方向,颜色,颜色);</p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>left<span class="token punctuation">,</span>red<span class="token punctuation">,</span>blue<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>











<h1 id="代码规范"><a href="#代码规范" class="headerlink" title="代码规范"></a>代码规范</h1><blockquote>
<ul>
<li>类名语义化，尽量简短精炼，明确，必须以字母开头命名。且全部字母为小写，单词之间统一用下划线“—”连接。</li>
<li>类名嵌套层次尽量不要超过三层。</li>
<li>尽量避免直接使用元素选择器。</li>
<li>属性书写顺序：</li>
<li>布局定义属性：display /  position / float  / clear / visibility / overflow</li>
<li>尺寸属性： width / height / margin /padding / border / bacground</li>
<li>文本属性： color / font / text-decoration / text-align / vertical-align</li>
<li>其他属性： content / cursor / border-radius / box-shadow / text-shadow</li>
<li>避免使用id选择器。</li>
<li>避免使用通配符 * 和 !important</li>
</ul>
</blockquote>
<h1 id="目录规范"><a href="#目录规范" class="headerlink" title="目录规范"></a>目录规范</h1><blockquote>
<p>项目文件夹： 项目名</p>
<p>​    样式文件夹： css</p>
<p>​    业务类图片文件夹 ： images</p>
<p>​    样式类图片文件夹： icons</p>
<p>​    字体类文件夹： fonts</p>
</blockquote>

                
            </div>
            <hr/>

            

    <div class="reprint" id="reprint-statement">
        
            <div class="reprint__author">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-user">
                        Author:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="/about" rel="external nofollow noreferrer">凡诚</a>
                </span>
            </div>
            <div class="reprint__type">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-link">
                        Link:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="http://example.com/2021/03/08/css-ji-chu/">http://example.com/2021/03/08/css-ji-chu/</a>
                </span>
            </div>
            <div class="reprint__notice">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-copyright">
                        Reprint policy:
                    </i>
                </span>
                <span class="reprint-info">
                    All articles in this blog are used except for special statements
                    <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                    reprint polocy. If reproduced, please indicate source
                    <a href="/about" target="_blank">凡诚</a>
                    !
                </span>
            </div>
        
    </div>

    <script async defer>
      document.addEventListener("copy", function (e) {
        let toastHTML = '<span>Copied successfully, please follow the reprint policy of this article</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">more</a>';
        M.toast({html: toastHTML})
      });

      function navToReprintStatement() {
        $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
      }
    </script>



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/tags/css/">
                                    <span class="chip bg-color">css</span>
                                </a>
                            
                                <a href="/tags/html/">
                                    <span class="chip bg-color">html</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css">
<div id="article-share">

    
    <div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/libs/share/js/social-share.min.js"></script>
    

    

</div>

                </div>
            </div>
            
                <style>
    #reward {
        margin: 40px 0;
        text-align: center;
    }

    #reward .reward-link {
        font-size: 1.4rem;
        line-height: 38px;
    }

    #reward .btn-floating:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #rewardModal {
        width: 320px;
        height: 350px;
    }

    #rewardModal .reward-title {
        margin: 15px auto;
        padding-bottom: 5px;
    }

    #rewardModal .modal-content {
        padding: 10px;
    }

    #rewardModal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 1.3rem;
        line-height: 20px;
        cursor: pointer;
    }

    #rewardModal .close:hover {
        color: #ef5350;
        transform: scale(1.3);
        -moz-transform:scale(1.3);
        -webkit-transform:scale(1.3);
        -o-transform:scale(1.3);
    }

    #rewardModal .reward-tabs {
        margin: 0 auto;
        width: 210px;
    }

    .reward-tabs .tabs {
        height: 38px;
        margin: 10px auto;
        padding-left: 0;
    }

    .reward-content ul {
        padding-left: 0 !important;
    }

    .reward-tabs .tabs .tab {
        height: 38px;
        line-height: 38px;
    }

    .reward-tabs .tab a {
        color: #fff;
        background-color: #ccc;
    }

    .reward-tabs .tab a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .reward-tabs .wechat-tab .active {
        color: #fff !important;
        background-color: #22AB38 !important;
    }

    .reward-tabs .alipay-tab .active {
        color: #fff !important;
        background-color: #019FE8 !important;
    }

    .reward-tabs .reward-img {
        width: 210px;
        height: 210px;
    }
</style>

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fas fa-times"></i></a>
            <h4 class="reward-title">你的赏识是我前进的动力</h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        <img src="/medias/reward/alipay.jpg" class="reward-img" alt="支付宝打赏二维码">
                    </div>
                    <div id="wechat">
                        <img src="/medias/reward/wechat.png" class="reward-img" alt="微信打赏二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.tabs').tabs();
    });
</script>

            
        </div>
    </div>

    

    

    

    
    <div class="livere-card card" data-aos="fade-up">
    <!-- 来必力City版安装代码 -->
    <div id="lv-container" class="card-content" data-id="city" data-uid="MTAyMC81NzU4NC8zNDA0OA==">
        <script type="text/javascript">
            (function (d, s) {
                let j, e = d.getElementsByTagName(s)[0];
                if (typeof LivereTower === 'function') {
                    return;
                }

                j = d.createElement(s);
                j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
                j.async = true;

                e.parentNode.insertBefore(j, e);
            })(document, 'script');
        </script>
        <noscript>为正常使用来必力评论功能请激活JavaScript。</noscript>
    </div>
    <!-- City版安装代码已完成 -->
</div>
    

    

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;Previous</div>
            <div class="card">
                <a href="/2021/04/06/android-ji-chu/">
                    <div class="card-image">
                        
                        
                        <img src="/medias/featureimages/3.jpg" class="responsive-img" alt="Android基础">
                        
                        <span class="card-title">Android基础</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            安卓(Android)是一种基于Linux内核(不包含GNU组件)的自由及开放源代码的操作系统。主要使用于移动设备，如智能手机,平板电脑，由美国Google公司和开放手机联盟领导及开发。
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i>2021-04-06
                        </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%8A%80%E6%9C%AF/" class="post-category">
                                    移动端技术
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/Android/">
                        <span class="chip bg-color">Android</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                Next&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/2021/02/11/mysql-ji-chu-pian/">
                    <div class="card-image">
                        
                        
                        <img src="/medias/featureimages/8.jpg" class="responsive-img" alt="MySQL基础">
                        
                        <span class="card-title">MySQL基础</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            MySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，属于 Oracle 旗下产品。
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2021-02-11
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/%E6%95%B0%E6%8D%AE%E5%BA%93/" class="post-category">
                                    数据库
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/%E6%95%B0%E6%8D%AE%E5%BA%93/">
                        <span class="chip bg-color">数据库</span>
                    </a>
                    
                    <a href="/tags/sql/">
                        <span class="chip bg-color">sql</span>
                    </a>
                    
                    <a href="/tags/mysql/">
                        <span class="chip bg-color">mysql</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>



<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/libs/codeBlock/codeLang.js"></script>


<!-- 代码块复制 -->

<script type="text/javascript" src="/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/libs/codeBlock/codeShrink.js"></script>


    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget card" style="background-color: white;">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;TOC</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>


<script src="/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            collapseDepth: Number('0'),
            headingSelector: 'h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>

    

</main>




    <footer class="page-footer bg-color">
    
        <link rel="stylesheet" href="/libs/aplayer/APlayer.min.css">
<style>
    .aplayer .aplayer-lrc p {
        
        font-size: 12px;
        font-weight: 700;
        line-height: 16px !important;
    }

    .aplayer .aplayer-lrc p.aplayer-lrc-current {
        
        font-size: 15px;
        color: blue;
    }

    
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important;
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0px !important;
    }

    
</style>
<div class="">
    
    <div class="row">
        <meting-js class="col l8 offset-l2 m10 offset-m1 s12"
                   server="netease"
                   type="playlist"
                   id="2477330090"
                   fixed='true'
                   autoplay='false'
                   theme='blue'
                   loop='all'
                   order='random'
                   preload='auto'
                   volume='0.7'
                   list-folded='true'
        >
        </meting-js>
    </div>
</div>

<script src="/libs/aplayer/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

    
    <div class="container row center-align" style="margin-bottom: 15px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            
                <span id="year">2022</span>
            
            <span id="year">2022</span>
            <a href="/about" target="_blank">凡诚</a>
            &nbsp;&nbsp;<a href="https://hexo.io/" target="_blank"></a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            &nbsp;<i class="fas fa-chart-area"></i>&nbsp;站点总字数:&nbsp;<span
                class="white-color">607.1k</span>&nbsp;字
            
            
            
            
            
            
            <span id="busuanzi_container_site_pv">
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
            
            
            <span id="busuanzi_container_site_uv">
                |&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;<span id="busuanzi_value_site_uv"
                    class="white-color"></span>&nbsp;人
            </span>
            
            <br>
            
            <span id="sitetime">载入运行时间...</span>
            <script>
                function siteTime() {
                    var seconds = 1000;
                    var minutes = seconds * 60;
                    var hours = minutes * 60;
                    var days = hours * 24;
                    var years = days * 365;
                    var today = new Date();
                    var startYear = "2022";
                    var startMonth = "11";
                    var startDate = "7";
                    var startHour = "0";
                    var startMinute = "0";
                    var startSecond = "0";
                    var todayYear = today.getFullYear();
                    var todayMonth = today.getMonth() + 1;
                    var todayDate = today.getDate();
                    var todayHour = today.getHours();
                    var todayMinute = today.getMinutes();
                    var todaySecond = today.getSeconds();
                    var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
                    var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
                    var diff = t2 - t1;
                    var diffYears = Math.floor(diff / years);
                    var diffDays = Math.floor((diff / days) - diffYears * 365);
                    var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
                    var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
                        minutes);
                    var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                        diffMinutes * minutes) / seconds);
                    if (startYear == todayYear) {
                        document.getElementById("year").innerHTML = todayYear;
                        document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffDays + " 天 " + diffHours +
                            " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                    } else {
                        document.getElementById("year").innerHTML = startYear + " - " + todayYear;
                        document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffYears + " 年 " + diffDays +
                            " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                    }
                }
                setInterval(siteTime, 1000);
            </script>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">
    <a href="https://github.com/fanshicheng" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:2639144944@qq.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=2639144944" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 2639144944" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>







</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;Search</span>
            <input type="search" id="searchInput" name="s" placeholder="Please enter a search keyword"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    var searchFunc = function (path, search_id, content_id) {
        'use strict';
        $.ajax({
            url: path,
            dataType: "xml",
            success: function (xmlResponse) {
                // get the contents from search data
                var datas = $("entry", xmlResponse).map(function () {
                    return {
                        title: $("title", this).text(),
                        content: $("content", this).text(),
                        url: $("url", this).text()
                    };
                }).get();
                var $input = document.getElementById(search_id);
                var $resultContent = document.getElementById(content_id);
                $input.addEventListener('input', function () {
                    var str = '<ul class=\"search-result-list\">';
                    var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                    $resultContent.innerHTML = "";
                    if (this.value.trim().length <= 0) {
                        return;
                    }
                    // perform local searching
                    datas.forEach(function (data) {
                        var isMatch = true;
                        var data_title = data.title.trim().toLowerCase();
                        var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                        var data_url = data.url;
                        data_url = data_url.indexOf('/') === 0 ? data.url : '/' + data_url;
                        var index_title = -1;
                        var index_content = -1;
                        var first_occur = -1;
                        // only match artiles with not empty titles and contents
                        if (data_title !== '' && data_content !== '') {
                            keywords.forEach(function (keyword, i) {
                                index_title = data_title.indexOf(keyword);
                                index_content = data_content.indexOf(keyword);
                                if (index_title < 0 && index_content < 0) {
                                    isMatch = false;
                                } else {
                                    if (index_content < 0) {
                                        index_content = 0;
                                    }
                                    if (i === 0) {
                                        first_occur = index_content;
                                    }
                                }
                            });
                        }
                        // show search results
                        if (isMatch) {
                            str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                            var content = data.content.trim().replace(/<[^>]+>/g, "");
                            if (first_occur >= 0) {
                                // cut out 100 characters
                                var start = first_occur - 20;
                                var end = first_occur + 80;
                                if (start < 0) {
                                    start = 0;
                                }
                                if (start === 0) {
                                    end = 100;
                                }
                                if (end > content.length) {
                                    end = content.length;
                                }
                                var match_content = content.substr(start, end);
                                // highlight all keywords
                                keywords.forEach(function (keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
                                });

                                str += "<p class=\"search-result\">" + match_content + "...</p>"
                            }
                            str += "</li>";
                        }
                    });
                    str += "</ul>";
                    $resultContent.innerHTML = str;
                });
            }
        });
    };

    searchFunc('/search.xml', 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>

    <script type="text/javascript">
        var OriginTitile=document.title,st;
        document.addEventListener("visibilitychange",function(){
            document.hidden?(document.title="(Ő∀Ő3)ノ",clearTimeout(st)):(document.title="ヽ(●-`Д´-)ノ欢迎回来",st=setTimeout(function(){document.title=OriginTitile},3e3))
        })
    </script>
    <!-- <script src="/js/cursor.js"></script> -->
    <script type="text/javascript">
        //只在桌面版网页启用特效
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
        }
        </script>
    <script src="/libs/materialize/materialize.min.js"></script>
    <script src="/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/libs/aos/aos.js"></script>
    <script src="/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/js/matery.js"></script>

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    
    <script async src="/libs/others/busuanzi.pure.mini.js"></script>
    

    

    
    <script>
        (function (i, s, o, g, r, a, m) {
            i["DaoVoiceObject"] = r;
            i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o), m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            a.charset = "utf-8";
            m.parentNode.insertBefore(a, m)
        })(window, document, "script", ('https:' == document.location.protocol ? 'https:' : 'http:') +
            "//widget.daovoice.io/widget/6984b559.js", "daovoice")
        daovoice('init', {
            app_id: "377cb7de"
        });
        daovoice('update');
    </script>
    

	
    
    <script type="text/javascript" color="0,0,255"
        pointColor="0,0,255" opacity='0.7'
        zIndex="-1" count="99"
        src="/libs/background/canvas-nest.js"></script>
    

    

    

    
    <script src="/libs/instantpage/instantpage.js" type="module"></script>
    
    <!-- 冒泡 -->
    
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/fireworks.js"></script>


</body>

</html>
